Как работает Server-Side Rendering

SSR работает через преобразование файлов HTML на сервере в полезную информацию для браузера.

При посещении веб-сайта браузер отправляет запрос на сервер, на котором хранится содержимое веб-сайта. Запрос обычно занимает несколько миллисекунд, его скорость зависит от множества факторов:

• скорости интернета;

• расположения сервера;

• количества пользователей, которые пытаются получить доступ к сайту;

• оптимизации веб-сайта.

После обработки запроса браузер возвращает полностью отрендеренный HTML и отображает его на экране. Если посещается другая страница, браузер снова запросит новую информацию. Это будет происходить каждый раз, когда загружается страница, версия которой не кеширована браузером. Даже если на новой странице есть только несколько элементов, отличных от текущей, браузер запросит всю страницу и отобразит её с нуля.

Почему удобно использовать SSR:

• Быстро загружается. Приложение, отрендеренное на стороне сервера, ускоряет загрузку страниц, когда пользователь страдает от медленного интернет-соединения. Это улучшает пользовательский опыт.

• Легко индексируется поисковыми системами. Поскольку контент может отображаться до загрузки страницы, поисковые системы могут легко индексировать его.

• Доступно. Приложения SSR подходят для пользователей со старыми устройствами, поскольку сервер отправляет предварительно обработанный контент в браузер.

Как связаны SSR и SEO

Боты поисковых систем могут легко сканировать статический HTML, но у них возникают проблемы с индексацией контента, созданного на JavaScript.

При SSR поисковые системы эффективно индексируют и сканируют контент на отрендеренных страницах, поскольку он может отображаться до загрузки страницы и в формате статического HTML.

Рендеринг на стороне сервера vs рендеринг на стороне клиента

Рендеринг на стороне сервера (SSR) и рендеринг на стороне клиента (CSR) — это два термина, которые описывают, как визуализируется веб-страница. Как правило, SSR означает, что страница отображается на сервере, а CSR — что она отображается на компьютере в браузере.

При рендеринге на стороне клиента (CSR) получается простой HTML-документ с информацией о стилях CSS и файлом JavaScript, который будет отображать остальную часть сайта с помощью браузера. Это радикально отличается от использования SSR: сервер отвечает только за загрузку HTML и CSS, всё остальное обрабатывается библиотекой JavaScript на стороне клиента.

В случае наличия нового контента на уже загруженной странице CSR работает быстрее SSR, так как загружается только часть страницы с новым контентом, а не страница целиком.

У CSR есть минусы. Например, поскольку контент не отображается до тех пор, пока страница не будет загружена в браузер, SEO для веб-сайта пострадает.

Важно помнить, что веб-сайт не сможет загрузиться, пока весь JavaScript не будет загружен в браузер. Что имеет смысл, так как он содержит весь необходимый контент. Если у пользователей медленное подключение к интернету, это может увеличить время первоначальной загрузки.

Как выбрать рендеринг для своего проекта?

SSR подходит для образовательных сайтов, маркетплейсов и приложений с простым пользовательским интерфейсом, где меньше страниц, функций и динамических данных. SSR обычно выбирают ради SEO, а также когда сайту нужна быстрая начальная загрузка или если на нём мало взаимодействий с пользователем.

CSR хорошо сочетается с динамическими веб-приложениями: социальными сетями или онлайн-мессенджерами. Информация в них постоянно меняется, поэтому особенно важна скорость обработки данных. Это поможет страницам быстрее обновляться: когда пришло новое сообщение, в чате мессенджера оно появляется моментально.