Режимы рендеринга маршрутов

Не каждой странице нужен один и тот же способ рендеринга. Маркетинговый лендинг должен быть статичным HTML, отдаваться мгновенно и индексироваться поисковиком. Лента, зависящая от текущего пользователя, должна рендериться на сервере при каждом запросе. А интерактивная панель за логином вообще не выиграет от сервера - её проще отдать клиенту. Angular 21 позволяет назначить режим рендеринга для каждого маршрута отдельно: один и тот же роутер обслуживает статичные, серверные и клиентские страницы в одном приложении.

• Маркетинговые страницы: prerender отдаёт готовый HTML с CDN, лучшая первая отрисовка и индексация поисковиком
• Персонализированные ленты: SSR рендерит на сервере при каждом запросе с учётом текущего пользователя
• Приватные дашборды: client-side render не тратит ресурсы сервера на экраны за авторизацией
• Angular 21: серверные маршруты задаются в app.routes.server.ts через ServerRoute с полем renderMode
• Гибридные сайты: документация статична (SSG), а интерактивный поиск по ней - клиентский, в одном приложении

Предварительные знания

• Конфигурация маршрутов: provideRouter, Routes, пути и параметры
• Понимание разницы клиент-сервер и что такое HTML, отданный сервером
• Идея гидрации: клиент оживляет статичную разметку, присланную сервером

Три режима рендеринга

Рендеринг - это превращение компонента в HTML. Вопрос в том, где и когда это происходит. Prerender делает HTML заранее, на этапе сборки: один готовый файл на маршрут, который раздаётся как статика. Server рендерит HTML на сервере в момент запроса, подставляя актуальные и персональные данные. Client отдаёт браузеру минимальную оболочку, а всё дерево строится уже на стороне пользователя в рантайме.

Prerender и server роднит то, что пользователь сразу видит наполненный HTML, а затем Angular гидрирует его - оживляет уже присланную разметку, не перестраивая DOM заново. Разница между ними во времени: prerender фиксирует HTML на сборке (контент одинаков для всех), server строит его на каждый запрос (контент может зависеть от пользователя).

Гидрация общая для prerender и server: браузер получает готовый HTML, показывает его сразу, а затем Angular восстанавливает реактивность поверх существующей разметки. Incremental hydration позволяет оживлять части страницы по мере необходимости, не блокируя всё дерево сразу.

Конфигурация серверных маршрутов

Режим рендеринга задаётся не в обычном app.routes.ts, а в отдельной серверной конфигурации - массиве ServerRoute. Каждая запись сопоставляет путь с одним из режимов через поле renderMode. Это разделение держит клиентскую маршрутизацию и решения о рендеринге в разных файлах.

Для prerender динамических маршрутов с параметрами (например, /product/:id) сборщику нужно знать список конкретных значений заранее. Его задают через getPrerenderParams - функцию, возвращающую массив параметров, для которых надо сгенерировать статичные страницы на сборке.

Prerender требует, чтобы все параметрические пути были известны на сборке. Если товары добавляются динамически после сборки, новые /product/:id не будут предрендерены и упадут в запасной режим. Для постоянно меняющегося набора страниц server подходит лучше, чем prerender.

Выбор режима под маршрут

Выбор режима - это размен между несколькими свойствами: скоростью первой отрисовки, свежестью данных, индексацией поисковиком и нагрузкой на сервер. Универсального ответа нет, но есть удобные ориентиры по характеру контента маршрута.

• Контент одинаков для всех и редко меняется (лендинг, документация) - prerender: мгновенная отдача с CDN и индексация
• Контент персональный или часто меняется, но важна индексация и первый HTML (лента, страница товара) - server
• Экран за авторизацией, без нужды в индексации, сильно интерактивный (дашборд, редактор) - client
• Сомнения между server и prerender обычно решает вопрос: меняются ли данные между сборками

Режимы можно смешивать в одном приложении: лендинг на prerender, лента на server, дашборд на client. Это и есть смысл per-route рендеринга - не выбирать один компромисс на всё, а подбирать оптимальный режим под характер каждого маршрута.

Связь с другими темами

Урок про выбор способа рендеринга на уровне маршрута. Опирается на базовую и ленивую маршрутизацию:

• Angular Router: маршруты — Те же маршруты, но каждому назначается режим рендеринга в серверной конфигурации
• Ленивая загрузка маршрутов — Деление кода и выбор режима рендеринга - две независимые оптимизации одного маршрута

Итог

• Angular 21 позволяет задать режим рендеринга для каждого маршрута отдельно, а не на всё приложение разом
• Три режима: prerender (SSG) генерирует HTML на этапе сборки, server (SSR) рендерит на сервере на каждый запрос, client отдаёт пустую оболочку и рендерит в браузере
• Серверные маршруты описываются в отдельном файле как массив ServerRoute с полем renderMode
• prerender годится для контента, одинакового для всех; server - для персонализированного; client - для приватных интерактивных экранов
• Выбор режима - это размен между скоростью первой отрисовки, индексацией, нагрузкой на сервер и свежестью данных

Связанные уроки

• ng-22-router-intro — Конфигурация маршрутов - основа: режим рендеринга назначается per-route в отдельной серверной конфигурации
• ng-24-lazy-loading — Деление кода по маршрутам сочетается с выбором режима рендеринга для каждого маршрута