</>
halfcoder

Гайды

Next.js: SSR и статическая генерация

App Router, Server Components, SSG и ISR, fetch на сервере, metadata и деплой standalone.

~10 мин чтения

ФронтендNext.jsReactSSR

Next.js: SSR и статическая генерация

Next.js — React-фреймворк с маршрутизацией по файлам, SSR/SSG/ISR, API routes / Server Actions, оптимизацией картинок. Версии 13+ — App Router (app/). База React — React: компоненты и хуки; сборка — Webpack и Vite (Next использует Turbopack/webpack под капотом).

1. Рендеринг: термины

РежимКогда генерируется HTML
SSGПри сборке (generateStaticParams)
SSRНа каждый запрос на сервере
ISRSSG + ревалидация по времени/on-demand

2. App Router: Server Components

По умолчанию компоненты в app/ — серверные (без useState). Клиентские — директива "use client".

3. Данные на сервере

async function Page() — fetch на сервере без утечки секретов в бандл. Кэш fetch настраивается опциями Next.

В App Router по умолчанию fetch может кэшироваться между запросами — для персональных данных передайте cache: 'no-store' или пометьте route как export const dynamic = 'force-dynamic'. Для данных, которые редко меняются, next: { revalidate: 60 } даёт ISR на уровне fetch без отдельного generateStaticParams.

4. Мета и SEO

metadata export, generateMetadata для динамики, sitemap.ts, robots.ts.

5. Деплой

Vercel, Node standalone output, Docker — см. Docker: контейнеризация.

6. Кэширование и revalidate

revalidate (ISR) и export const dynamic = 'force-static' / 'force-dynamic' явно задают поведение. Для данных из CMS комбинируйте on-demand revalidation (revalidatePath / revalidateTag) с тегами в fetch. Не кэшируйте персональные ответы на shared CDN без private семантики.

7. Server Actions и безопасность

Server Actions выполняются на сервере; валидируйте вход так же, как в API route. Ограничивайте размер тела и защищайте от CSRF там, где фреймворк не делает это автоматически (следите за релизами Next).

8. Чек-лист

  • Явно решить, что client-only (браузерные API).
  • Streaming и loading.tsx для UX.
  • Анализ бандла (@next/bundle-analyzer).
  • next/image с корректными remotePatterns для внешних доменов.
  • Middleware для редиректов/auth — держите лёгким (без тяжёлого I/O).

Дальше: тег Next.js