Блок 4 · Урок 6 из 7

Рендеринг: где собирается страница

Три способа собрать HTML-страницу — на устройстве пользователя, на сервере по запросу или заранее — и зачем это знать.

⏱ ≈ 7 минут ⚙️ рендеринг, производительность, SEO 🎯 цель: выбирать режим рендеринга под задачу

Зачем это вам

Агент нередко произносит фразы вроде «рендерим на клиенте», «добавим SSR для SEO» или «это статика». Без понимания рендеринга вы не можете оценить, правильное ли решение предлагается и какие у него последствия для скорости и поисковой видимости. Это также прямой мост к следующему уроку: ответ на вопрос «когда нужен Next, а когда хватит Vite» целиком вытекает отсюда.

Один ключевой вопрос

Где и когда собирается HTML?

Рендеринг (превращение кода и данных в готовую страницу) — это не магия, а конкретное место и момент. Любое веб-приложение делает это одним из трёх способов.

CSR (Client-Side Rendering — отрисовка на стороне клиента) — браузер получает почти пустой HTML-файл и файл JavaScript. Весь контент страницы JS-код рисует прямо в браузере на устройстве пользователя. Это классическая схема для SPA (Single Page Application — одностраничное приложение), например React + Vite. Плюс: после первой загрузки навигация мгновенная и полностью интерактивная. Минусы: первый показ медленнее (пока JS не отработал, пользователь видит пустой экран), и поисковые роботы часто получают тот же пустой HTML — значит, SEO (видимость в поисковых системах) страдает.

SSR (Server-Side Rendering — отрисовка на стороне сервера) — под каждый запрос сервер собирает готовый HTML и отправляет его браузеру. Пользователь видит контент сразу, поисковик тоже получает живую страницу. Минус: при большом трафике сервер нагружен сильнее, и инфраструктура дороже.

SSG (Static Site Generation — статическая генерация) — страницы собираются один раз заранее, в момент сборки (build-time), и хранятся как готовые HTML-файлы. Отдаются мгновенно из CDN (сеть доставки контента — серверы рядом с пользователем по всему миру), дёшево и надёжно. Идеально для блогов, лендингов, документации, где контент меняется редко. Минус: если данные постоянно меняются, придётся пересобирать сайт при каждом изменении.

Существует ещё ISR (Incremental Static Regeneration — инкрементальная статическая регенерация) — это гибрид: страницы статические, но автоматически пересобираются через заданный промежуток времени. Одной фразой: статика, которая умеет стареть и обновляться сама.

РежимКогда хорошМинус
CSRИнтерактивные приложения за логином (дашборды, кабинеты)Медленный первый показ, слабый SEO
SSRНужен SEO и быстрый первый показ (интернет-магазин, новостной сайт)Нагрузка на сервер при пиковом трафике
SSGКонтент меняется редко (блог, лендинг, документация)Не подходит для данных, которые обновляются в реальном времени

📌 Практическое правило: если страница должна быть видна в поиске и контент публичный — нужен SSR или SSG. Если это закрытый кабинет за логином — хватит CSR.

Аналогия, которую можно пересказать

Ресторан: три формата подачи

«Собирают при вас за столом»— CSR: браузер рисует страницу на вашем устройстве из привезённых ингредиентов-скриптов. Сначала ждёте сборку, зато потом всё интерактивно.
«Готовят по заказу на кухне»— SSR: сервер собирает HTML под каждый ваш запрос и выносит готовым. Подано быстро и свежо.
«Готовое на витрине заранее»— SSG: страницы собраны при сборке и лежат готовыми. Берёте мгновенно, но меню фиксированное.
«Что подать — зависит от блюда»— выбор режима зависит от задачи: SEO, скорость, свежесть данных.

Ни один формат не лучше других сам по себе — каждый уместен в своей ситуации. Большинство современных фреймворков (Next.js) позволяют смешивать их на уровне отдельных страниц.

Запомните одно

Рендеринг — это вопрос «где и когда», а не «что»

Все три режима собирают одну и ту же страницу. Разница только в том, кто это делает (браузер или сервер) и когда (заранее или по запросу). От этого зависит скорость первого показа, нагрузка на инфраструктуру и то, увидит ли поисковик ваш контент.

Что это даёт на практике

Фраза агента → что он имеет в виду

«Рендерим на клиенте»
Браузер сам строит страницу (CSR). Первый показ медленнее; поисковик может ничего не увидеть.
«Сделаем SSR»
Сервер будет отдавать готовый HTML под каждый запрос — лучше для SEO и скорости первого показа, но дороже в инфраструктуре.
«Это статика (SSG)»
Страницы собраны заранее при сборке, грузятся мгновенно и дёшево; обновляются только при новом деплое.
«Для SEO уйдём с чистого SPA»
Поисковику нужен готовый HTML — а чистый SPA его не даёт. Решение: SSR или SSG, обычно через Next.js.

Рендеринг — превращение кода и данных в готовую HTML-страницу; ключевой вопрос — где и когда это происходит.

CSR (Client-Side Rendering) — страницу рисует браузер на устройстве пользователя; типично для SPA (React + Vite).

SSR (Server-Side Rendering) — сервер собирает HTML под каждый запрос и отдаёт готовым.

SSG (Static Site Generation) — страницы собраны заранее, в момент сборки; хранятся как статические файлы.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Что такое CSR (client-side rendering)?

2. Чем хорош SSG (статическая генерация)?

3. Когда выбирают SSR?

4. Агент говорит: «для SEO уйдём с чистого SPA на Next с SSR». Почему?

Куда мы идём

Программа курса — 7 блоков