Что такое Angular Universal?

Angular Universal — это технология, позволяющая рендерить Angular-приложения на стороне сервера (SSR - Server-Side Rendering). Это делает ваше приложение более доступным и ускоряет загрузку страниц, особенно для поисковых систем и пользователей с медленными интернет-соединениями.

Зачем использовать Angular Universal?

1. Улучшение SEO: Поисковые системы, такие как Google, могут труднее индексировать одностраничные приложения, созданные с помощью Angular. Рендеринг на стороне сервера позволяет генерировать HTML-код до того, как он будет отправлен пользователю, что делает ваше приложение более "дружественным" к поисковым системам.
2. Ускорение времени загрузки: Поскольку HTML-страницы отдают уже сгенерированный контент, пользователи видят содержимое сразу, а не ожидают загрузку и рендеринг на клиенте.
3. Поддержка пользователей с ограниченными ресурсами: Приложения, рендерящиеся на стороне сервера, могут работать лучше на старых устройствах и медленных соединениях, так как они требуют меньше вычислительных ресурсов от клиента.

Как настроить Angular Universal?

Для начала работы с Angular Universal нужно выполнить несколько шагов.

1. Установка Angular Universal

Сначала установите Angular Universal в ваше приложение, выполнив следующую команду:

ng add @nguniversal/express-engine

Эта команда добавляет все необходимые зависимости и создает файлы для серверного рендеринга.

2. Изменение приложения

После установки Angular Universal создается файл server.ts. В этом файле настраивается сервер Express, который будет обслуживать приложение.

Вот пример простого сервера server.ts:

import 'zone.js/node';
import { enableProdMode } from '@angular/core';
import { APP_SERVER_MODULE } from './dist/main';
import { renderModuleFactory } from '@angular/platform-server';
import * as express from 'express';
import { join } from 'path';

enableProdMode();

const app = express();
const DIST_FOLDER = join(process.cwd(), 'dist');

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req });
});

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`);
});

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

Теперь вам нужно собрать ваше приложение для использования с серверным рендерингом. Используйте следующее:

npm run build:ssr
npm run serve:ssr

Эти команды скомпилируют ваше Angular приложение и запустят сервер.

4. Проверка работы

Теперь вы можете открыть браузер и перейти по адресу http://localhost:4000. Вы должны увидеть ваше Angular приложение, рендерящееся на стороне сервера!

Заключение

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

Если у вас есть вопросы или вы хотите узнать больше, не стесняйтесь задавать их!