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

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

Установка Angular Universal

Для интеграции SSR используется пакет @nguniversal/express-engine. Настройка производится через Angular CLI:

ng add @nguniversal/express-engine

Команда автоматически создаёт:

  • Серверный модуль (app.server.module.ts)
  • Express сервер (server.ts)
  • Конфигурацию для сборки SSR (angular.json)

Создание серверного модуля

AppServerModule импортирует корневой модуль приложения и модуль ServerModule:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Рендеринг на сервере

Express сервер подключает Angular Universal через ngExpressEngine:

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

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

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('index', { req });
});

app.listen(4000, () => {
  console.log(`Server running on http://localhost:4000`);
});

Оптимизация SSR

  • Использовать TransferState для передачи данных с сервера на клиент, чтобы избежать повторных HTTP-запросов.
  • Избегать прямого доступа к window или document, так как на сервере их нет. Для работы с DOM применять сервис Renderer2 или условную проверку isPlatformBrowser.
  • Минимизировать тяжелые вычисления на сервере, чтобы снизить время отклика.

Сборка и запуск

Для сборки SSR выполняются две команды:

ng build --prod
ng run <project-name>:server:production

После этого Express сервер готов к обслуживанию приложений с предварительным рендерингом.

Оглавление