Что происходит на клиенте при SSR
Что проверяют
Понимаете ли вы, что на клиенте после SSR работа только начинается, и знаете ли, что такое гидратация и чем за неё платят. Вопрос отсеивает тех, кто знает про серверный рендеринг одну фразу про пользу для поиска.
Как отвечать
Клиент получает готовую разметку и почти сразу её показывает, но страница пока мёртвая. Дальше происходит вот что:
- браузер разбирает HTML и рисует содержимое, поэтому первая отрисовка наступает рано;
- параллельно качается и исполняется код приложения;
- фреймворк проходит по существующей разметке, восстанавливает по ней своё дерево, навешивает обработчики и подхватывает начальное состояние, которое сервер положил в страницу отдельным блоком данных. Это и есть гидратация;
- до её конца нажатия и ввод либо теряются, либо ждут. После неё приложение работает как обычное клиентское, и следующие переходы идут без перезагрузки.
Полезно назвать, чем это чинят: потоковая отдача разметки кусками, отложенная гидратация тяжёлых частей, разделение кода по маршрутам, острова интерактивности, серверные компоненты, у которых на клиент уезжает не только HTML.
Отдельно скажите про совпадение разметки: сервер и клиент обязаны отрисовать одно и то же, иначе фреймворк сообщает о расхождении и перерисовывает поддерево заново.
Где спотыкаются
Считают, что SSR ускоряет всё. Содержимое видно раньше, а отзывчивость может стать хуже: пока не отработала гидратация, страница выглядит рабочей, но не отвечает. Именно на это жалуются пользователи таких сайтов.
Второе: читают window, localStorage или текущее время прямо при рендере. На сервере этого нет, разметка расходится, и расхождение глушат подавлением предупреждения вместо переноса кода в эффект после монтирования.
Третье: забывают, что состояние для гидратации едет внутри HTML. Туда легко утекают токены и лишние поля ответа, а вес страницы растёт: одни и те же данные приезжают и разметкой, и сериализованным объектом.