Серверный рендеринг (SSR) — это техника, при которой первое отображение веб-страницы происходит на сервере, а не в браузере пользователя.
При обычном клиентском рендеринге браузер получает пустой HTML-файл с ссылкой на JavaScript. Браузер загружает JavaScript, парсит его, выполняет и только потом динамически строит DOM и отображает содержимое.
При SSR сервер обрабатывает компоненты приложения, формирует готовый HTML-код и отправляет его браузеру.
Этапы SSR:
- Запрос: Пользовательский браузер отправляет HTTP-запрос на сервер.
- Рендеринг на сервере: Сервер запускает JavaScript-код приложения, включая логику рендеринга UI-компонентов, и получает полностью сформированный HTML-строку.
- Ответ: Сервер отправляет этот HTML-файл браузеру.
- Первичное отображение: Браузер получает HTML и сразу отображает содержимое страницы, так как все элементы уже присутствуют в разметке.
- Гидратация (Hydration): После загрузки HTML браузер загружает и выполняет JavaScript-код приложения. Этот код "оживляет" статичную разметку, добавляя интерактивность, обработчики событий и привязывая состояние.
Преимущества SSR:
- Улучшенное SEO: Поисковые роботы лучше индексир
Серверный рендеринг (SSR) — это техника, при которой первое отображение веб-страницы происходит на сервере, а не в браузере пользователя.
При обычном клиентском рендеринге браузер получает пустой HTML-файл с ссылкой на JavaScript. Браузер загружает JavaScript, парсит его, выполняет и только потом динамически строит DOM и отображает содержимое.
При SSR сервер обрабатывает компоненты приложения, формирует готовый HTML-код и отправляет его браузеру.
Этапы SSR:
- Запрос: Пользовательский браузер отправляет HTTP-запрос на сервер.
- Рендеринг на сервере: Сервер запускает JavaScript-код приложения, включая логику рендеринга UI-компонентов, и получает полностью сформированный HTML-строку.
- Ответ: Сервер отправляет этот HTML-файл браузеру.
- Первичное отображение: Браузер получает HTML и сразу отображает содержимое страницы, так как все элементы уже присутствуют в разметке.
- Гидратация (Hydration): После загрузки HTML браузер загружает и выполняет JavaScript-код приложения. Этот код "оживляет" статичную разметку, добавляя интерактивность, обработчики событий и привязывая состояние.
Преимущества SSR:
- Улучшенное SEO: Поисковые роботы лучше индексир