Angular Universal

Angular Universal представляет собой технологию сервера для рендеринга Angular-приложений на стороне сервера (SSR). Она позволяет генерировать HTML на сервере, улучшая производительность, SEO и время до первого отображения контента (TTFB).

Принцип работы

  1. Сборка приложения для сервера – создаётся отдельный бандл с использованием @nguniversal/express-engine или @nguniversal/hapi-engine.
  2. Рендеринг HTML на сервере – сервер обрабатывает маршруты Angular, выполняет компоненты и возвращает готовый HTML.
  3. Гидратация на клиенте – после загрузки HTML браузер «подхватывает» Angular-приложение, связывает события и завершает работу как SPA.

Установка и настройка

Используется Angular CLI с генерацией Universal-модуля:

ng add @nguniversal/express-engine

После этого создаются:

  • Серверный модуль app.server.module.ts
  • Серверный бандл main.server.ts
  • Скрипты для сборки и запуска сервера (server.ts, package.json)

Пример маршрута на сервере с Express

import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';

const app = express();
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = 'index.html';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', distFolder);

app.get('*.*', express.static(distFolder));
app.get('*', (req, res) => {
  res.render(indexHtml, { req });
});

app.listen(4000);

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

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

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

  • Работа с глобальными объектами (window, document) требует проверки на наличие клиента.
  • Динамические данные должны быть готовы к серверной обработке.
  • Анимации и некоторые сторонние библиотеки могут требовать адаптации для SSR.

Angular Universal обеспечивает архитектурное решение для высокопроизводительных и SEO-дружелюбных приложений, сочетая возможности серверного рендеринга с привычной SPA-моделью Angular.

Оглавление