Что такое SSR в Angular или Service Side Rendering?

Серверный рендеринг (Server-Side Rendering, SSR) в Angular - это подход, при котором Angular приложение отрисовывается на сервере и отправляется клиенту в виде готового HTML контента. Это отличается от клиентского рендеринга, при котором Angular выполняется в браузере клиента.

SSR предоставляет несколько преимуществ, включая улучшенную производительность, улучшенную SEO (Search Engine Optimization) и лучшую доступность для поисковых систем и социальных сетей. Это также позволяет пользователям увидеть содержимое страницы быстрее, так как основная часть отрисовки происходит на сервере.

Шаг 1: Подготовка проекта

Для использования SSR в Angular необходимо настроить проект. Вы можете создать новый проект с SSR, используя Angular CLI с флагом --universal, или добавить SSR к существующему проекту с помощью Angular Universal.

Шаг 2: Создание серверного компонента

В SSR существует понятие серверных компонентов, которые отличаются от клиентских компонентов. Серверный компонент представляет собой Angular компонент, который будет отрисовываться на сервере. Он должен быть аннотирован специальным декоратором @Component с параметром templateUrl, который указывает на шаблон компонента.

import { Component } from '@angular/core'

@Component({
	templateUrl: './server.component.html'
})
export class ServerComponent {
	// Код компонента
}

Шаг 3: Создание шаблона серверного компонента

Создайте шаблон для серверного компонента, указанный в templateUrl декоратора @Component. Этот шаблон будет использоваться для генерации HTML контента на сервере.

<!-- server.component.html -->
<div>
	<!-- Содержимое серверного компонента -->
</div>

Шаг 4: Настройка серверного входного файла

Настройте серверный входной файл, который будет отвечать на запросы и отрисовывать Angular приложение на сервере. Этот файл будет запускаться на Node.js сервере.

import 'zone.js/dist/zone-node';

import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import express from 'express';
import { join } from 'path';

// Путь к серверному компоненту и шаблону
import { ServerComponent } from './src/app/server.component';

// Включение режима продакшн
enableProdMode();

// Создание экземпляра Express приложения
const app = express();

// Путь к статическим файлам
const staticPath = join(process.cwd(), 'dist/browser');

// Настройка

 папки со статическими файлами
app.use(express.static(staticPath, { index: false }));

// Настройка движка рендеринга Angular
app.engine(
  'html',
  ngExpressEngine({
    bootstrap: ServerComponent,
  })
);

// Указание расширения для шаблонов
app.set('view engine', 'html');
app.set('views', staticPath);

// Обработка запросов и рендеринг Angular приложения
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Запуск сервера
app.listen(4000, () => {
  console.log('Angular SSR сервер запущен на порту 4000');
});

Шаг 5: Запуск SSR приложения

Запустите SSR приложение, выполнив команду npm run serve:ssr или аналогичную, указанную в вашем проекте.

После запуска сервера SSR, Angular будет отрисовывать приложение на сервере и отправлять готовый HTML контент клиенту. Это обеспечивает более быструю загрузку страницы, лучшую SEO и улучшенную пользовательскую доступность.

Однако стоит отметить, что SSR требует дополнительных ресурсов и может усложнить разработку некоторых аспектов, таких как манипуляции с DOM. Но в целом, SSR является мощным инструментом для оптимизации Angular приложений.

Little Angular programmer's library

Что такое SSR в Angular или Service Side Rendering?