Способы отрисовки: SSR, SPA и пререндеринг

До сих пор каждая страница блога отрисовывалась на сервере при каждом запросе — это SSR (server-side rendering). Но не всем сайтам нужен работающий Node.js-сервер. React Router умеет ещё два способа: SPA-режим, когда сервера нет вовсе, и пререндеринг, когда HTML страниц создаётся один раз во время сборки. Способ выбирают в файле react-router.config.ts.

Файл настроек

Он уже есть в корне проекта:

// react-router.config.ts
import type { Config } from "@react-router/dev/config";
 
export default {
  ssr: true,
} satisfies Config;

ssr: true — значение по умолчанию: на каждый запрос сервер вызывает loader и отрисовывает HTML.

Пререндеринг

Страницы, которые меняются редко, можно создать заранее. Опция prerender принимает список адресов:

// react-router.config.ts
import type { Config } from "@react-router/dev/config";
 
export default {
  ssr: true,
  prerender: ["/", "/about"],
} satisfies Config;

При npm run build фреймворк вызовет загрузчики этих страниц и сохранит готовые HTML-файлы в build/client. Остальные страницы по-прежнему отрисовываются сервером. Значение prerender: true создаёт все адреса без динамических сегментов.

Список из данных

Для адресов с параметрами prerender может быть функцией:

// react-router.config.ts
import type { Config } from "@react-router/dev/config";
 
export default {
  async prerender() {
    const ids = [1, 2, 3]; // например, из базы
    return ["/", "/about", ...ids.map((id) => `/posts/${id}`)];
  },
} satisfies Config;

После сборки страницы /posts/1, /posts/2, /posts/3 будут лежать готовыми файлами.

SPA-режим

// react-router.config.ts
import type { Config } from "@react-router/dev/config";
 
export default {
  ssr: false,
} satisfies Config;

С ssr: false сборка создаёт статический сайт: файл build/client/index.html и JavaScript. Его можно положить на любой статический хостинг. Серверных loader и action в таком режиме нет — данные загружают clientLoader и clientAction в браузере. Пререндеринг можно сочетать и с этим режимом.

Сравнение

Частая ошибка

Включить ssr: false в проекте, где уже есть серверные loader с базой и сессиями, и ожидать, что всё продолжит работать. Без сервера этот код негде выполнить, и сборка сообщит об ошибке. Решение о способе отрисовки принимают в начале: блог с комментариями и входом требует SSR, а пререндеринг подключают для отдельных статичных страниц.