Это руководство поможет вам выбрать правильную стратегию рендеринга для различных частей вашего Angular-приложения.
Что такое стратегии рендеринга?
Стратегии рендеринга определяют, когда и где генерируется HTML-контент вашего Angular-приложения. Каждая стратегия предлагает свои компромиссы между производительностью начальной загрузки страницы, интерактивностью, возможностями SEO и использованием ресурсов сервера.
Angular поддерживает три основные стратегии рендеринга:
- Рендеринг на стороне клиента (Client-Side Rendering — CSR) — Контент полностью рендерится в браузере.
- Генерация статического сайта (Static Site Generation — SSG / Пререндеринг) — Контент предварительно рендерится во время сборки.
- Рендеринг на стороне сервера (Server-Side Rendering — SSR) — Контент рендерится на сервере при первичном запросе маршрута.
Рендеринг на стороне клиента (CSR)
CSR используется в Angular по умолчанию. Контент полностью рендерится в браузере после загрузки JavaScript.
Когда использовать CSR
✅ Хорошо подходит для:
- Интерактивных приложений (дашборды, панели администратора)
- Приложений реального времени
- Внутренних инструментов, где SEO не имеет значения
- SPA со сложным состоянием на стороне клиента
❌ По возможности избегайте для:
- Публичного контента, требующего SEO
- Страниц, где критически важна скорость начальной загрузки
Особенности CSR
| Аспект | Влияние |
|---|---|
| SEO | Плохое — контент не виден краулерам до выполнения JS |
| Начальная загрузка | Медленнее — необходимо сначала скачать и выполнить JavaScript |
| Интерактивность | Мгновенная после загрузки |
| Требования к серверу | Минимальные (кроме базовой конфигурации) |
| Сложность | Самая простая, так как работает с минимальной конфигурацией |
Генерация статического сайта (SSG / Пререндеринг)
SSG предварительно рендерит страницы во время сборки в статические HTML-файлы. Сервер отправляет заранее собранный HTML для начальной загрузки страницы. После гидратации приложение работает полностью в браузере как традиционное SPA — последующая навигация, смена маршрутов и вызовы API происходят на стороне клиента без рендеринга на сервере.
Когда использовать SSG
✅ Хорошо подходит для:
- Маркетинговых страниц и лендингов
- Постов в блогах и документации
- Каталогов товаров со стабильным контентом
- Контента, который не меняется для конкретного пользователя
❌ По возможности избегайте для:
- Пользовательского контента
- Часто меняющихся данных
- Информации в реальном времени
Особенности SSG
| Аспект | Влияние |
|---|---|
| SEO | Отличное — полный HTML доступен сразу |
| Начальная загрузка | Самая быстрая — заранее сгенерированный HTML |
| Интерактивность | После завершения гидратации |
| Требования к серверу | Нет (подходит для CDN) |
| Время сборки | Дольше — генерирует все страницы заранее |
| Обновление контента | Требует пересборки и деплоя |
📖 Реализация: См. раздел Настройка пререндеринга во время сборки в руководстве по SSR.
Рендеринг на стороне сервера (SSR)
SSR генерирует HTML на сервере при первичном запросе маршрута, обеспечивая динамический контент с хорошим SEO. Сервер рендерит HTML и отправляет его клиенту.
Как только клиент отрисовывает страницу, Angular гидрирует приложение, и далее оно работает полностью в браузере как традиционное SPA — последующая навигация, смена маршрутов и вызовы API происходят на стороне клиента без дополнительного рендеринга на сервере.
Когда использовать SSR
✅ Хорошо подходит для:
- Страниц товаров в электронной коммерции (динамические цены/наличие)
- Новостных сайтов и лент социальных сетей
- Персонализированного контента, который часто меняется
❌ По возможности избегайте для:
- Статического контента (используйте SSG)
- Случаев, когда важна стоимость серверов
Особенности SSR
| Аспект | Влияние |
|---|---|
| SEO | Отличное — полный HTML для краулеров |
| Начальная загрузка | Быстрая — мгновенная видимость контента |
| Интерактивность | Задержана до гидратации |
| Требования к серверу | Требуется сервер |
| Персонализация | Полный доступ к контексту пользователя |
| Стоимость сервера | Выше — рендеринг при каждом начальном запросе маршрута |
📖 Реализация: См. разделы Серверная маршрутизация и Создание компонентов, совместимых с сервером в руководстве по SSR.
Выбор правильной стратегии
Матрица принятия решений
| Если вам нужно... | Используйте эту стратегию | Почему |
|---|---|---|
| SEO + Статический контент | SSG | Предварительно отрендеренный HTML, самая быстрая загрузка |
| SEO + Динамический контент | SSR | Свежий контент при начальном запросе маршрута |
| Нет SEO + Интерактивность | CSR | Проще всего, сервер не нужен |
| Смешанные требования | Гибридная | Разные стратегии для разных маршрутов |
Обеспечение интерактивности SSR/SSG с помощью гидратации
При использовании SSR или SSG Angular «гидрирует» отрендеренный на сервере HTML, чтобы сделать его интерактивным.
Доступные стратегии:
- Полная гидратация — Все приложение становится интерактивным сразу (по умолчанию).
- Инкрементальная гидратация — Части становятся интерактивными по мере необходимости (лучшая производительность).
- Воспроизведение событий (Event replay) — Захватывает клики до завершения гидратации.
📖 Узнать больше:
- Руководство по гидратации — Полная настройка гидратации
- Инкрементальная гидратация — Продвинутая гидратация с блоками
@defer