С толкова много опции за избор, изобразяването е тема, която трябва да сте в крак.
Съвременните уеб рамки предлагат много опции за това как да се достави сайт или приложение от сървър на клиент. Можете да генерирате HTML от двете страни или да го изобразите предварително за високоскоростно разпространение чрез мрежа за доставка на съдържание.
Решаването как да структурирате сайт или приложение зависи от няколко различни фактора. Трябва да сте наясно как посетителите ще имат достъп до вашия сайт или приложение. Трябва да разберете дали скоростта на зареждане е по-важна при първоначалното зареждане или при последващата навигация. Също така помислете колко често ще актуализирате сайта.
Имайте предвид всички тези фактори, за да прецените плюсовете и минусите на всяка парадигма на изобразяване.
Изобразяване на уебсайтове по повече от един начин
Изобразяването на уебсайт се отнася до процеса, чрез който уебсайт се показва в уеб браузър. Има много различни начини за подход към процеса на конвертиране на необработени данни във форматиран HTML на екрана на потребителя.
Всеки метод има своите плюсове и минуси и познаването на предимствата и недостатъците на всеки може да ви помогне да изберете правилния за вашия сайт.
CSR: Браузърът поема отговорност
CSR означава Client Side Rendering. Когато изобразявате клиентска страна на приложение или сайт, сървърът предава почти никакъв HTML, освен малка част от шаблонен код. След това страницата изисква всички необходими данни от сървъра, след събитието за зареждане на страницата, чрез AJAX заявки.
Когато приложение или страница се визуализира от страна на клиента, сървърът предава скрипт на клиента, който ще генерира HTML в браузъра на клиента. Това позволява приложения с една страница, които не опресняват браузъра, когато взаимодействате с тях.
CSR приложенията често се зареждат бързо в навигацията, но може да се зареждат бавно първоначално. Скоростта ще зависи до голяма степен от рамката, която изберете да направите изобразяването и колко допълнителни библиотеки и добавки използвате. Повечето популярни съвременни рамки на JavaScript включват опция за КСО.
Страниците и приложенията, изобразени изцяло от страна на клиента, страдат от невъзможността да навигират директно до дадена страница с помощта на URL адрес. Когато рендирано от страна на клиента приложение се стартира за първи път, независимо от въведения URL адрес, то ще навигира до същата начална точка.
SSR: Изобразяване на централен сървър
SSR означава Изобразяване от страната на сървъра. Това е много по-традиционна форма на изобразяване на уеб страници, при която сайтовете генерират HTML въз основа на шаблони и изпращат комбинация от HTML, таблици със стилове и скриптове на клиента. Голямата част от най-популярните бекенд уеб рамки попадат в тази категория.
Рендираните от страна на сървъра приложения и сайтове обикновено имат по-бързо първоначално зареждане, но всяка следваща навигация ще изисква пълно опресняване. Това означава, че не само ще отнемат повече време, но и разработчиците, работещи с SSR, ще трябва да вземат предвид управлението на сесиите.
Най-големият плюс на генерираните от SSR сайтове и приложения е последователността на навигацията по пътя. Потребител, който въведе даден път, ще бъде отведен директно до исканата страница. Някои рамки управляват потребителски пренасочвания от страница към страница в рамките на приложението, но потребителите може да не могат да получат достъп до страницата, която желаят първоначално.
Много съвременни рамки предлагат смесени решения, които започват с обслужване на изобразена от сървъра страница на клиента. След като страницата се зареди, настъпва събитие, известно като хидратация, при което събитията на скрипта от страна на клиента се прикачват към контролите на страницата. Оттук нататък клиентът се справя с всяка навигация.
Смесената динамика предлага възможността на потребителите да отидат директно на която и да е страница в приложение, като същевременно получават скоростта и плавността на приложение с една страница. Next.js предлага множество парадигми за изобразяване, както и Nuxt.js и Sveltekit.
SSG: Минимизирано изобразяване
SSG, или генерирането на статичен сайт, заобикаля необходимостта от генериране на HTML от страната на клиента или сървъра. Вместо това сайтовете и приложенията в стил SSG компилират предварително всяка страница, която може да им е необходима, и изпращат резултатите към CDN за бърза доставка.
Това е изключително ефективен метод за изключително бързо обслужване на уеб страници. Резултатите обикновено се компилират в прости пакети, съдържащи всички HTML и таблици със стилове, необходими за отделна страница. Тези пакети се поддържат възможно най-компактни, за да се гарантира, че потребителят ще ги получи възможно най-бързо.
SSG сайтовете са склонни да предлагат изключително бързи скорости на зареждане, въпреки че изискват опресняване за всяка навигация. Основният недостатък на статичния сайт обаче е липсата на гъвкавост. Силно динамичните системи като приложения за социални медии или сложни платформи за електронна търговия ще изискват много повече промени, отколкото SSG може лесно да понесе.
Много статични сайтове също ще изискват по-голямо количество режийни разходи за промяна, тъй като всяка нова промяна ще трябва да бъде независимо компилирана. Това прави изобразяването в стил SSG лош избор за сайтове, които се променят бързо, като дигитален магазин с бързо променящ се инвентар или приложения за социални медии.
ISR: По малко от всичко
Лесно най-сложният тип рендиране, но и най-полезният, ISR означава инкрементално статично регенериране. ISR съчетава скоростта и мащабируемостта на статично генерираните сайтове с реактивността на приложенията в стил SSR и CSR.
Когато се поиска някоя страница в страница или приложение в стил ISR, сървърът първо ще провери дали има неизтекла кеширана версия на страницата. Ако има, сървърът незабавно ще обслужи кешираната страница.
Ако кеширана версия на страницата не съществува или е минало достатъчно време от нейното генериране, сървърът ще генерира нова версия. Тази нова версия ще бъде предадена на клиента и ще се кешира за бъдеща употреба.
Този тип изобразяване е по-сложен за настройка, но автоматизира повечето от проблемите, които SSG сайтовете обикновено срещат. Това позволява на приложенията да предлагат както скоростта, така и надеждността на статично генерирано приложение, като същевременно автоматизират допълнителните разходи.
Няколко съвременни рамки вече предлагат опция за изобразяване в стил ISR. Много други имат поддръжка за постепенно генериране в разработката. Повечето основни рамки скоро ще поддържат ISR изобразяване, ако още не го правят.
Кой тип изобразяване е най-добрият?
Има няколко начина за изобразяване на уебсайт или приложение. Всеки от тези четири вида изобразяване има множество варианти. Нито един тип изобразяване не е идеален за всички проекти и кой тип ще изберете ще зависи от това какво е най-важно във вашия сайт или приложение.
Когато избирате парадигма за рендиране за вашия проект, е важно да имате предвид скоростта, как вашата аудитория ще използва вашия проект и колко често ще се променя сайтът. Това ще бъдат основните принципи, които ще ви помогнат да решите кой е най-добрият начин да структурирате вашия сайт или приложение.