Производительность SSR

Server-Side Rendering (SSR) в Angular реализуется через платформу Angular Universal и позволяет генерировать HTML на сервере, повышая скорость первого отображения страницы (First Contentful Paint) и улучшая SEO.

Архитектура SSR

При SSR Angular использует отдельный серверный рендерер, который выполняет следующие шаги:

  1. Инициализация Angular приложения на сервере.
  2. Генерация HTML для запрашиваемого маршрута.
  3. Передача сгенерированного HTML клиенту.
  4. Гидратация: Angular на клиенте подключается к уже существующему DOM, обеспечивая интерактивность.

Оптимизация рендеринга

  • Ленивая загрузка модулей (lazy loading) позволяет уменьшить нагрузку на сервер, рендеря только необходимый контент.
  • Использование TransferState: позволяет передавать данные, полученные на сервере, напрямую в клиентское приложение без повторных HTTP-запросов.
import { TransferState, makeStateKey } from '@angular/platform-browser';

const DATA_KEY = makeStateKey<any>('data');

constructor(private transferState: TransferState) {}

ngOnInit() {
  if (this.transferState.hasKey(DATA_KEY)) {
    this.data = this.transferState.get(DATA_KEY, null);
  } else {
    this.http.get('/api/data').subscribe(res => {
      this.data = res;
      this.transferState.set(DATA_KEY, res);
    });
  }
}
  • Минимизация блокирующих операций: избегать сложных вычислений в ngOnInit и constructor, перемещая их в асинхронные сервисы.
  • Кэширование HTML: часто запрашиваемые страницы можно кэшировать на сервере для ускорения отдачи.

Влияние на производительность

  • SSR снижает время до первой отрисовки, но увеличивает нагрузку на сервер, так как каждый запрос требует рендеринга Angular-приложения.
  • Использование Incremental Static Regeneration (ISR) или кэширование динамических страниц позволяет уменьшить вычислительные затраты.
  • Оптимизация стилей и скриптов (Tree Shaking, Lazy Loading) критически важна для снижения времени гидратации на клиенте.

Практические рекомендации

  • Для динамических страниц использовать Server-Side Rendering только для критического контента, а остальной контент загружать клиентским приложением.
  • Включать preboot для SSR, чтобы избежать потери событий пользователя до полной гидратации.
  • Мониторить время генерации страниц на сервере и использовать профилировщики для выявления узких мест.
Оглавление