Режими Routes Rendering в Angular

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Останні кілька років Angular зазнавав значних змін. Головна зміна — вбудована підтримка серверного рендерингу (SSR) в Angular, яка замінила окрему бібліотеку Angular Universal. Тепер використовується @angular/ssr.

Для більшості випадків застосунок або потребує серверного рендерингу, або ні. Наприклад, аналітична панель (dashboard) за логіном не має потреби в SSR, а ось сторінка інтернет-магазину — навпаки.

Але що робити, якщо в застосунку є як приватні, так і публічні сторінки? У випадку з інтернет-магазином (наприклад Сільпо який побудован таким чином) сторінки товарів мають бути доступні всім, а от оформлення замовлення чи історія покупок — тільки авторизованим користувачам.

Якщо для приватних сторінок увімкнути SSR, то неавторизований користувач отримає відрендерену сервером сторінку входу (або ту, куди його скерує AuthGuard). Лише після завантаження клієнтської частини Angular перевірить статус користувача й перенаправить його на потрібну сторінку.

Це означає, що користувач побачить миготіння на сторінці входу, перш ніж побачить фактичну сторінку. Це відбувається, тому що в нашому випадку контекст автентифікації доступний лише в браузері, а не на сервері. Тому на сервері користувач не авторизований, але в браузері він вже увійшов.

Якщо ви стикалися з цією проблемою, як і я, то до Angular 19 вам, ймовірно, доводилося вимикати SSR через platformId, обкладатися різними if та шукати обхідні шляхи. Це, м’яко кажучи, не найкращий досвід для розробника. Однак команда Angular у версії 19 ввела концепцію режимів рендерингу для окремих маршрутів, або так зване гібридне рендеринг.

Тепер замість того, щоб всі маршрути були або клієнтським рендерингом (CSR), або серверним рендерингом (SSR), ви можете вибрати, що робити для кожного маршруту окремо. Крім того, додано можливість виконувати статичну генерацію сайту (SSG) для окремих маршрутів.

Налаштування серверних маршрутів вручну

Angular запровадив концепцію серверних маршрутів, за допомогою якої можна визначити, що робити з певними маршрутами. Для прикладу, в нас є два маршрути, як показано нижче:

export const routes: Routes = [
  {
    path: '',
    component: HomePageComponent,
    canActivate: [redirectIfNotLoggedInGuard],
  },
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [redirectIfLoggedInGuard],
  },
];

Для цієї конфігурації ми також можемо окремо додати налаштування для серверних маршрутів, вказуючи шлях і режим рендерингу, який нам потрібен:

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

...

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

Режим рендерингу приймає одне з трьох значень: RenderMode.Client, RenderMode.Server та RenderMode.Prerender. У нашому прикладі вище, для головної сторінки встановлено RenderMode.Client, тому вона не буде рендеритись на сервері. Для сторінки входу встановлено RenderMode.Server, тож вона буде рендеритись на сервері.

Далі нам потрібно вказати серверні маршрути в конфігурації нашого додатку, щоб Angular міг їх використовувати. Це досягається за допомогою функції provideServerRouting, в яку передаються серверні маршрути, які ми налаштували.

...
import { provideServerRendering } from '@angular/platform-server';
import { provideServerRouting } from '@angular/ssr';
...

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideServerRouting(serverRoutes),
    provideRouter(routes),
    ...
  ],
};

І ось і все.

Якщо повернутися до нашого прикладу, ви побачите, що миготіння на сторінці входу повністю зникло.