SSR и гидратация
Вопрос
Что такое SSR, гидратация и чем отличается от CSR и SSG?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
SSR отдаёт готовый HTML с сервера на каждый запрос
гидратация навешивает обработчики на пришедшую разметку
SSG генерирует HTML на сборке
SSR улучшает первый экран и индексацию
ошибка гидратации - расхождение разметки сервера и клиента
источники расхождения: Date.now, random, window, локаль
Что могут спросить следом
- Почему нельзя читать localStorage при первом рендере
- Что такое TTFB и как на него влияет SSR
- Чем RSC отличаются от обычного SSR
Разбор
CSR отдаёт пустой div и бандл - контент появляется после загрузки JS.
SSR рендерит HTML на сервере на каждый запрос, SSG - заранее, на сборке. ISR - SSG
с фоновым обновлением.
Гидратация - процесс, когда React на клиенте проходит по уже пришедшей разметке и навешивает обработчики, вместо того чтобы создавать узлы заново. Отсюда требование: первый рендер на клиенте должен дать ровно ту же разметку.
Расхождение (Date.now(), Math.random(), обращение к window, локаль или часовой пояс)
даёт ошибку гидратации: React выбрасывает серверную разметку и рендерит заново - первый
экран мигает и всё замедляется.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «React 18-19: Suspense, transitions, RSC»
- Автоматический батчинг
- useDeferredValue и debounce
- Что делает React Compiler
- Функция из серверного компонента в клиентский
- RSC и SSR
- Что запускает Suspense
- Transition для значения поля
- use в условии