Angular Academy · Урок

Серверные маршруты и режимы отображения

Настраивайте предварительный рендеринг, SSR и CSR для каждого маршрута

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

Универсального решения нет

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

Три режима

RenderMode.Server выполняет рендеринг при каждом запросе, RenderMode.Client — только в браузере (CSR), а RenderMode.Prerender создаёт статичный HTML во время сборки (SSG).

Конфигурация маршрутов сервера

Определите ServerRoute[], сопоставляющий пути с режимами рендеринга, а затем передайте его с помощью provideServerRouting в конфигурации сервера.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

Подключение маршрутов

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

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

Когда использовать предварительный рендеринг

Выберите Prerender для стабильных публичных страниц: главной, страницы «О компании» и документации. Они один раз превращаются в HTML во время сборки, мгновенно отдаются из CDN и не требуют затрат сервера на каждый запрос.

Когда использовать серверный режим

Выберите Server для страниц, содержимое которых меняется в зависимости от запроса или пользователя, но которым по-прежнему нужны SEO или быстрая первая отрисовка, например для страницы товара с актуальным остатком.

Когда использовать клиентский режим

Выберите Client для высокоинтерактивных закрытых страниц, где SEO и первая отрисовка не так важны, например для панели управления с авторизацией. Сервер отправляет оболочку, а браузер выполняет рендеринг.

Предварительный рендеринг динамических параметров

Для маршрутов с параметрами необходимо сообщить средству предварительного рендеринга, какие параметры нужно сгенерировать, вернув список с помощью getPrerenderParams.

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

Запасной вариант для предварительного рендеринга

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

Заголовки и статус для отдельных маршрутов

Маршруты сервера могут задавать заголовки ответа и коды состояния. Это полезно для политики кэширования или возврата 404 из обработчика маршрута «не найдено».

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

Стратегическое сочетание режимов

Настоящее приложение сочетает разные подходы: предварительно отрисовывает маркетинговые страницы, формирует на сервере динамические страницы, критически важные для SEO, а приложение после входа в аккаунт отрисовывает на клиенте. Это позволяет одновременно оптимизировать затраты и производительность.

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

Проверьте свои знания о режимах рендеринга.

Итоги

Вы настроили рендеринг для отдельных маршрутов с помощью ServerRoute[] и provideServerRouting: Prerender — для стабильных публичных страниц, Server — для динамических страниц, важных для SEO, а Client — для закрытых интерактивных страниц, включая параметры предварительного рендеринга для динамических маршрутов.

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

Урок «Серверные маршруты и режимы отображения» бесплатный?

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

Чему я научусь в уроке «Серверные маршруты и режимы отображения»?

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

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

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

Сколько времени занимает урок «Серверные маршруты и режимы отображения»?

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

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

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

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

← Назад к Angular Academy