Angular Academy · Урок

Настройка Angular SSR

Добавляйте SSR с помощью Angular CLI

«Настройка Angular SSR» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Добавление SSR

Быстрее всего включить SSR можно с помощью схемы ng add @angular/ssr. Она автоматически настраивает сборку сервера, сервер на основе Express и гидратацию.

// terminal
// ng add @angular/ssr

Новые проекты

При создании нового приложения можно сразу включить SSR с помощью соответствующего флага, чтобы проект изначально был готов к SSR.

// ng new my-app --ssr

Что добавляет схема

Она добавляет server.ts (сервер Express), начальную загрузку в main.server.ts, файл app.config.server.ts, обновляет angular.json настройками сервера и включает гидратацию в конфигурации приложения.

provideServerRendering

Конфигурация серверного приложения предоставляет механизм SSR через provideServerRendering(), объединённый с конфигурацией браузера.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

Гидратация на клиенте

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

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Сервер Express

server.ts создаёт приложение Express, которое отдаёт статические ресурсы и передаёт рендеринг HTML механизму Angular SSR для всех остальных маршрутов.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Сервер разработки

Во время разработки ng serve автоматически запускает SSR с помощью сборщика приложения, поэтому вы видите результат серверного рендеринга и гидратацию без дополнительных действий.

// ng serve

Сборка для продакшена

Сборка для продакшена создаёт пакет browser и пакет server. Для использования SSR в продакшене необходимо запустить точку входа сервера Node.

// ng build
// node dist/my-app/server/server.mjs

API только для браузера

Код также выполняется на сервере, где не существуют window, document и localStorage. Защитите доступ к ним проверками, иначе во время SSR произойдёт сбой.

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

Абсолютные URL для HTTP

На сервере относительные URL API не имеют источника. Используйте абсолютные URL или настройте базовый URL, чтобы вызовы HttpClient на сервере корректно разрешались.

Проверка работы SSR

Чтобы убедиться, что SSR работает, запросите страницу и изучите необработанный ответ, например с помощью curl. В HTML должно быть видно отрисованное содержимое, а не только пустой корневой элемент приложения.

// curl http://localhost:4000/ | grep "<h1>"

Быстрая проверка

Проверьте свои знания о настройке SSR.

Итоги

Вы настроили SSR с помощью ng add @angular/ssr: эта команда добавляет сервер Express, provideServerRendering() и гидратацию на клиенте. Не забывайте защищать API только для браузера, использовать абсолютные URL на сервере и проверять наличие отрисованного HTML в необработанном ответе.

Часто задаваемые вопросы

Урок «Настройка Angular SSR» бесплатный?

Да — полный текст урока «Настройка Angular SSR» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка Angular SSR»?

Добавляйте SSR с помощью Angular CLI Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Настройка Angular SSR»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy