Пререндеринг статических страниц

Angular поддерживает пререндеринг (pre-rendering), позволяющий генерировать статические HTML-страницы на этапе сборки, что ускоряет загрузку и улучшает SEO. Основным инструментом является Angular Universal, обеспечивающий серверную генерацию контента.

Основные концепции

  • Server-Side Rendering (SSR) — выполнение Angular-приложения на сервере, генерация HTML и отправка готового контента клиенту.
  • Pre-rendering — разновидность SSR, при которой конкретные маршруты генерируются заранее во время сборки проекта.
  • Static Generation — статические страницы создаются один раз и хранятся в виде HTML-файлов, которые сервер просто отдает при запросе.

Настройка пререндеринга

  1. Установка Angular Universal:
ng add @nguniversal/express-engine
  1. Создание файла маршрутов для пререндеринга:
// routes.ts
export const ROUTES = [
  '/',
  '/about',
  '/products',
];
  1. Запуск команды генерации статических страниц:
npm run prerender

В результате для каждого маршрута создается HTML-файл с полностью сгенерированным контентом.

Преимущества

  • Быстрая загрузка страниц за счет отсутствия необходимости ждать выполнения Angular-приложения на клиенте.
  • Улучшенное SEO, так как поисковые роботы получают готовый HTML.
  • Возможность кэширования и работы в CDN без дополнительной нагрузки на сервер.

Ограничения и особенности

  • Пререндеринг подходит для статического контента; динамический контент должен загружаться на клиенте.
  • Изменения данных на сервере не обновляют заранее сгенерированные страницы без пересборки.
  • Для интерактивных компонентов необходимо корректное сочетание prerender и client-side hydration (ngOnInit выполняется на клиенте после загрузки страницы).

Практическое использование

Чаще всего пререндеринг применяется для лендингов, блогов, каталогов товаров, где контент относительно статичен. Angular Universal совместно с пререндерингом позволяет создавать высокопроизводительные приложения с минимальной задержкой первого отображения и полным управлением маршрутизацией.

Оглавление