SSR, стоит ли вам его использовать?

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



Вступление

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

Но со временем веб-сайты превратились в веб-приложения. Они стали намного сложнее. Они позволяли пользователям общаться в чате, обмениваться фотографиями и документами, совершать покупки и т.д. В целом, они стали сильно интерактивными, и именно здесь SSR постепенно начал терять популярность, а рендеринг на стороне клиента начал занимать центральное место.

CSR против SSR

Рендеринг на стороне клиента - это рендеринг веб-страницы в браузере, а не на сервере вашего веб-сайта. Сегодня это используется по умолчанию в большинстве фреймворков Javascript. CSR запрашивает HTML-файл со ссылками на браузер при начальной загрузке. Затем Javascript извлекает эти ссылки и собирает веб-страницу вместе. Одним из главных недостатков CSR является то, что, поскольку вся нагрузка ложится на браузер, он может быстро увеличивать время рендеринга, что приводит к ухудшению пользовательского опыта. Приложение CSR также часто не дает хороших результатов SEO и может плохо работать на медленных устройствах.

С помощью SSR сервер полностью отображает всю страницу, а затем отправляет HTML-документ в браузер, который затем отображает содержимое веб-сайта. Это означает, что контент становится доступен намного раньше, что благоприятно сказывается на SEO и индексации. С другой стороны, одним из основных недостатков SSR является безопасность, поскольку между сервером и браузером намного больше связи по сравнению с CSR. Больше запросов также означает больше расходов. SSR отлично работает для статических страниц, но при более интерактивном и сложном содержимом страницы частые полные перезагрузки страницы и запросы могут фактически привести к снижению производительности и замедлению рендеринга страницы. Приложения SSR также имеют тенденцию иметь большие HTML-файлы из-за встроенного состояния гидратации.

Поисковый робот Google

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

В этой статье мы возьмем в качестве примера Googlebot, или, как его знают многие, Google web crawler. Робот Googlebot работает в три этапа:

1. сканирование
2. рендеринг
3. индексация

Googlebot получает веб-сайт через HTTP-запрос. Во-первых, Googlebot проверяет robots.txt файл, чтобы узнать, разрешен ли URL-адрес. Существует возможность заблокировать Googlebot от индексации вашего сайта. Если это так, он не будет выполнять HTTP-запрос и пропускать этот URL. Если нет, Googlebot просканирует веб-сайт и проанализирует его HTML. Когда ресурсы Googlebot позволяют это, Chromium отображает страницу и выполняет Javascript.

Затем Googlebot использует отрисованную страницу для индексации и снова анализирует HTML и сканирует его на наличие ссылок, которые позволяют выполнять обход. Затем он помещает эти ссылки в очередь и повторяет процесс. Результатом этого является проиндексированная веб-страница. Это означает, что весь процесс, который проходит Googlebot, определяет, насколько высоко в очереди результатов будет отображаться ваша веб-страница.

Вывод

Итак, теперь, какой из них выбрать? ССР или КСО? Часто веб-приложения используют и то, и другое. Их часто называют гибридными приложениями. Netflix, например, использует комбинацию SSR, React (это библиотека, поэтому CSR используется по умолчанию) и предварительную выборку. Он использует SSR для статических страниц и React и предварительную выборку для остальных. Недавно я прочитал статью о том, как они оптимизировали свое веб-приложение, и один из выводов, к которому пришел автор, заключается в следующем:

Компромисс, на который решил пойти Netflix, заключается в том, чтобы рендерить целевую страницу на сервере с использованием React, но также предварительно извлекать React / код для остальной части процесса регистрации во время работы на нем. Это оптимизирует производительность при первой загрузке, но также оптимизирует время загрузки для остальной части процесса регистрации, который имеет гораздо больший размер пакета JS для загрузки, поскольку это одностраничное приложение.