Въведение
Всеки път, когато бъде поискана уеб страница, напълно генерираната страница трябва да бъде върната на потребителя с бързо време за реакция. В отговор на HTTP извикване на потребител се получава HTML страница като резултат от браузъра. Но това стана безполезно с бума на уеб приложенията, генерирани от JavaScript.
Да приемем, че имаме типичен уебсайт на PHP, където се опитваме да извлечем данни от базата данни. Със старите решения за изобразяване от страна на сървъра, сървърът компилира всичко и доставя напълно изобразена HTML страница на зрителя, което е бързо. Но всеки път, когато зрителят премине към друг маршрут, сървърът трябва да върши работата отново, което увеличава времето за зареждане на страницата и някои уеб роботи не могат да индексират site.user
Нека проучим в тази статия как SSR се използва за осигуряване на по-бързо реагиращи сайтове с JavaScript.
Какво е изобразяване от страна на сървъра?
Изобразяване от страна на сървъра (SSR) — SSR е способността на JavaScript приложение да изобразява от страната на сървъра, а не в браузъра. SSR е процес на вземане на уеб сайт с JavaScript рамка от страна на клиента и изобразяване на статичен HTML и CSS на сървъра. SSR помага за по-бързото изобразяване на уебсайта (Бързо първо изобразяване).
Браузърът първо получава HTML документи като изображения, CSS и JavaScript и ги събира. След това анализира и изтегля тези документи. Така че само с HTML и CSS файлове браузърът може да визуализира страницата и го прави много бързо, докато JavaScript файловете се изтеглят във фонов режим.
Страната на сървъра изпраща напълно изобразена HTML страница на клиента и докато JavaScript пакетът на клиента поема и позволява на SPA рамката да работи и да има бързо време за разработка за последваща навигация.
Предимства на SSR
- Ефективност
добавяне на съдържание на уеб страница в Google. Това позволява на вашия сайт да има по-бързо време за зареждане на първата страница, което е ключът към доброто потребителско изживяване, което означава, че няма нужда от първоначалното зареждане.
- SEO
Търсачките не могат ефективно и правилно да добавят съдържание на уеб страница в нея (Индексиране), което може да рендира изключително от страна на клиента, въпреки най-новото подобрение на индексирането на търсачките. Google предпочита сайтове с бързо зареждане. Google обхожда уеб приложения, изградени с JavaScript, така че е по-добре да разполагате с изобразено от страната на сървъра съдържание, готово за Google и други търсачки да обхождат вашия сайт. Така че с SSR получавате предимствата на традиционното SEO за уебсайтове, тъй като цялата страница вече може да бъде обхождана от ботове.
· Оптимизация на социални медии
Хората могат лесно да споделят страница от вашия сайт в социалните медии и могат да съберат метаданните (изображения, заглавия, описания), лесно необходими за по-бързо споделяне на връзките.
· Използвайте опит
Fast First Render позволява на сървъра да съхранява информация за текущия сайт на потребителя и да изпраща различни отговори въз основа на тази информация, което помага, когато потребителят има бавна интернет връзка или остарели устройства.
Какво е Next.js?
Next.js е минималистична рамка за изобразяване на React приложения от страна на сървъра. Това е технология за изобразяване на рамка от страната на сървъра и е инструмент за създаване на уеб приложения. Next.js може да бъде конфигуриран да генерира статични активи за сайт с помощта на автоматична статична оптимизация и експортиране на статичен HTML. Next.js се възползва значително от JavaScript модула.
Основни характеристики -
· Сървърно изобразяване — Next.js е страхотна рамка на React, която може да се използва за изобразени от сървър сайтове и статично предварително изградени сайтове или и двете. Преди да изпратим HTML на клиента, можем да визуализираме компоненти от страната на сървъра
· Функция за горещо презареждане- тъй като използва базирана на уеб пакет Dev среда, така че сървърът ще се презареди автоматично, след като запазите кода, което ускорява разработката. Така че презарежда страницата при откриване на запазените промени.
· Автоматично разделяне на код и отложено зареждане, което дава голямо увеличение на производителността, тъй като предотвратява зареждането на ненужни кодове, тъй като оптимизирането на приложението става лесно.
· Автоматично маршрутизиране — Просто базирано на файл (страница) маршрутизиране, така че за по-прости страници няма нужда да картографирате маршрутите си, а за по-сложни ситуации имате възможността да картографирате маршрутите си.
· Вградена поддръжка на CSS — в комплект със стилизиран JSX, който предоставя пълна обхватна и удобна поддръжка на CSS в JS.
· Внедряването е изключително лесно с Next.js, можем да изпълним командата за изграждане, за да изградим вашите файлове или статични активи и да хостваме приложения навсякъде.
