Узнайте о Server Side Rendering в Angular!

Содержание 📑

Раздел 1: Введение в серверный рендеринг Angular

• Введение в серверный рендеринг
• Зачем нужен серверный рендеринг?
• Сравнение с рендерингом на клиенте

Раздел 2: Установка пакетов для серверного рендеринга

• Установка пакета NG Universal/Express Engine
• Изменения в package.json
• Создание основного серверного модуля
• Использование модуля сервера приложения

Раздел 3: Запуск приложения с серверным рендерингом

• Запуск в режиме серверного рендеринга
• Проверка и исправление ошибок

Раздел 4: Передача состояния с сервера на клиент

• Возможность повторного использования состояния
• Сохранение состояния на сервере
• Чтение состояния на клиенте

Раздел 5: Работа серверного рендеринга в Angular

• Преимущества и недостатки серверного рендеринга
• Пример использования серверного рендеринга
• Сравнение с серверным рендерингом в React

Раздел 6: Заключение

• Резюме по серверному рендерингу Angular

📝 Введение в серверный рендеринг Angular

Серверный рендеринг – это процесс рендеринга приложения на сервере, а не на клиенте. В отличие от рендеринга на клиентской стороне, где JavaScript собирает весь макет страницы, при серверном рендеринге приложение рендерится на бэкэнде и отображается на странице напрямую. Это имеет свои преимущества и недостатки, которые мы рассмотрим подробнее.

Зачем нужен серверный рендеринг?

Одной из основных проблем рендеринга на клиенте является то, что страницы не индексируются поисковыми системами, такими как Google. Это означает, что статьи или другой контент не видны поисковым системам, что может снизить видимость вашего приложения. Кроме того, при рендеринге на клиенте пользователь видит пустую страницу до того, как JavaScript будет полностью загружен и отрендерен, что может создать ощущение задержки загрузки.

Серверный рендеринг решает эти проблемы, так как приложение рендерится на сервере и передается на клиентскую сторону уже полностью сформированным. Это позволяет поисковым системам индексировать страницы и пользователям видеть контент сразу после загрузки страницы.

Сравнение с рендерингом на клиенте

В сравнении с рендерингом в React, серверный рендеринг Angular менее популярен и имеет более сложный уровень кода. В React существуют специальные инструменты, такие как Next.js, которые предоставляют метод renderToString для серверного рендеринга компонентов на сервере. В Angular подобных инструментов нет, и серверный рендеринг реализуется через установку пакета NG Universal/Express Engine и дополнительных настроек.

Хотя серверный рендеринг в Angular может быть сложным, он является стабильным и надежным решением для обеспечения индексации контента поисковыми системами и улучшения пользовательского опыта.

📦 Установка пакетов для серверного рендеринга

Для включения серверного рендеринга Angular необходимо установить пакет NG Universal/Express Engine. Этот пакет добавляет необходимые зависимости и файлы для реализации серверного рендеринга.

Установка пакета NG Universal/Express Engine

Выполните следующую команду, чтобы установить пакет NG Universal/Express Engine:

NG add NG Universal/Express Engine

После установки вы увидите изменения в файле package.json, а также новые файлы, связанные с серверным рендерингом.

Изменения в package.json

После установки пакета NG Universal/Express Engine в файле package.json появится новая зависимость "NG Universal". Убедитесь, что версия Angular указана корректно.

Также в верхней части файла появятся новые команды, связанные с серверным рендерингом: "serve", "build" и "prerender".

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

В папке src создайте новый файл с именем "main.server.ts". Этот файл будет использоваться в качестве основного серверного модуля.

// src/main.server.ts

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppServerModule } from './app/app.server.module';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule };

В основном серверном модуле будет использоваться модуль AppServerModule, который будет импортироваться из файла app.server.module.

Использование модуля сервера приложения

Теперь, когда у нас есть основной серверный модуль, нам нужно использовать его для рендеринга на сервере. Для этого мы создадим новый файл app.server.module.ts, который будет импортировать модуль AppModule и экспортировать его.

// src/app/app.server.module.ts

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

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

Теперь наш сервер будет использовать модуль AppServerModule вместо AppModule для рендеринга приложения на сервере.

⚙️ Запуск приложения с серверным рендерингом

Для запуска приложения в режиме серверного рендеринга воспользуйтесь командой "yarn Dev SSR" из файла package.json.

yarn Dev SSR

Эта команда запустит серверную и клиентскую части вашего приложения и предоставит вам URL, по которому вы можете открыть страницу.

Загляните в исходный код страницы, и вы увидите, что контент был отрендерен на сервере. Теперь ваше приложение будет индексироваться поисковыми системами, а пользователи смогут видеть контент сразу после загрузки страницы.

🔄 Передача состояния с сервера на клиент

Для того чтобы передать состояние с сервера на клиент, нам понадобится модуль TransferState из пакета '@angular/platform-browser'. Он позволяет нам сохранить состояние на сервере и считать его на клиенте.

Возможность повторного использования состояния

Когда мы используем серверный рендеринг, мы можем сохранить состояние на сервере и считать его на клиенте. Это позволяет повторно использовать состояние, которое уже было получено на сервере, и избежать повторных запросов к API на клиентской стороне.

Сохранение состояния на сервере

Чтобы сохранить данные на серверной стороне, мы будем использовать объект TransferState. У него есть метод set, который принимает ключ и значение для сохранения состояния. В нашем случае, ключом будет 'usersTable', а значением будет массив с данными пользователей.

// app.component.ts

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

const USERS_TABLE_KEY = makeStateKey('usersTable');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any[];

  constructor(
    private userService: UserService,
    private transferState: TransferState
  ) {}

  ngOnInit() {
    if (this.transferState.hasKey(USERS_TABLE_KEY)) {
      this.users = this.transferState.get(USERS_TABLE_KEY, []);
    } else {
      this.userService.getUsers().subscribe(users => {
        this.users = users;
        this.transferState.set(USERS_TABLE_KEY, users);
      });
    }
  }
}

В этом примере мы использовали метод hasKey для проверки наличия сохраненного состояния. Если оно есть, мы читаем данные из transferState. Если же состояние не было сохранено, мы делаем запрос на сервер через сервис UserService и сохраняем полученные данные в transferState с ключом USERS_TABLE_KEY.

Чтение состояния на клиенте

На клиенте мы также используем метод hasKey для проверки наличия сохраненного состояния. Если оно есть, мы его читаем из transferState и присваиваем свойству this.users. Если же состояние не было сохранено, мы делаем запрос на сервер через сервис UserService.

Таким образом, мы избегаем повторных запросов к API на клиентской стороне и используем уже имеющиеся данные.

✔️ Заключение

Серверный рендеринг в Angular – это мощный инструмент, который позволяет индексировать страницы поисковыми системами и улучшить пользовательский опыт. Хотя он может быть сложным в реализации, использование TransferState позволяет эффективно переносить состояние с сервера на клиент.

Надеемся, что этот гайд был полезен и помог вам разобраться в серверном рендеринге Angular. Удачи в разработке вашего приложения!