3. Данные, ISR и revalidatePath

Модуль 14-isr в вашем проекте показывает, как Next.js сочетает:

• статику и серверный рендеринг,
• инкрементальную регенерацию (ISR),
• генерацию путей на этапе сборки (generateStaticParams),
• ручную ревалидацию через server actions и revalidatePath.

3.1. Базовое ISR: экспорт revalidate

Принцип: если в странице/маршруте экспортировать константу revalidate, Next.js будет:

• один раз сгенерирует HTML и кэширует его,
• затем раз в N секунд (где N — значение revalidate) пересоздавать страницу в фоне,
• пользователи получают свежую версию после обновления кэша.

Пример:

// каждые 20 секунд HTML будет регенерироваться
export const revalidate = 20;

export default function Page() {
  return <div>ISR demo {new Date().toISOString()}</div>;
}

Что важно:

• Функция компонента может быть синхронной или async — главное, что результат кэшируется.
• Используйте revalidate, когда данные:
  • не меняются слишком часто,
  • но и не настолько «вечные», чтобы делать полностью статическую страницу.

3.2. generateMetadata для ISR‑страниц

В ISR‑модуле вы также используете generateMetadata:

• функция может быть async,
• может использовать те же данные или параметры, что и страница,
• возвращает объект метаданных (title, description, и т.д.).

Пример:

export const revalidate = 20;

export async function generateMetadata() {
  return {
    title: '14-isr',
  };
}

export default function Page() {
  return <div>14-isr {new Date().toISOString()}</div>;
}

Принципы:

• Метаданные должны соответствовать тому, что рендерится на странице.
• Можно использовать параметры маршрута (params) в generateMetadata, чтобы динамически формировать <title> и другие теги.

3.3. generateStaticParams и dynamicParams

Для динамических маршрутов (например, /14-isr/byslug/[slug]) можно:

• заранее сгенерировать набор путей,
• управлять поведением для «неизвестных» параметров.

Ключевые экспорты:

• generateStaticParams — функция, возвращающая массив { slug: string } (или других параметров маршрута).
• dynamicParams:
  • true — если параметра нет в generateStaticParams, страница будет сгенерирована на лету (SSR) и закэширована.
  • false — если параметра нет, страница будет отдавать 404.

Пример с внешним API:

export const revalidate = 20;

// Если параметр отсутствует в generateStaticParams — делаем 404
export const dynamicParams = false;

export async function generateStaticParams() {
  const { users } = await fetch('https://dummyjson.com/users').then((res) =>
    res.json(),
  );

  return users.map((user: any) => ({
    slug: user.id.toString(),
  }));
}

Метаданные с параметром:

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  return {
    title: `14-isr ${slug}`,
  };
}

Страница:

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const user = await fetch(`https://dummyjson.com/users/${slug}`).then((res) =>
    res.json(),
  );

  return (
    <div>
      14-isr {user.firstName} {user.lastName}
    </div>
  );
}

Принципы:

• Используйте generateStaticParams, когда:
  • набор параметров известен (или его можно получить на этапе сборки),
  • вы хотите предгенерировать страницы.
• Настраивайте dynamicParams:
  • false — безопаснее, даёт предсказуемое поведение (404 для неизвестных параметров),
  • true — полезно, если список параметров может изменяться и вы хотите «догружать» новые на лету.

3.4. Ручная ревалидация через revalidatePath

В модуле 14-isr/bypath вы показываете:

• базовую страницу с revalidate и датой,
• кнопку, которая вызывает server action revalidateAction,
• эта action вызывает revalidatePath('/14-isr/bypath').

Сторона страницы:

import { RevalidateButton } from './RevalidateButton';

export const revalidate = 200_000;

export default function Page() {
  return (
    <div>
      <h1>Revalidate by path {new Date().toISOString()}</h1>
      <RevalidateButton />
    </div>
  );
}

Клиентская кнопка:

'use client';

import { revalidateAction } from './revalidate.action';

export function RevalidateButton() {
  return (
    <form action={revalidateAction}>
      <button type="submit">Revalidate</button>
    </form>
  );
}

Server action с revalidatePath:

'use server';

import { revalidatePath } from 'next/cache';

export async function revalidateAction() {
  // Можно делать дополнительные проверки, логирование, auth и т.п.
  revalidatePath('/14-isr/bypath');
}

Принципы:

• revalidatePath('/path') вручную инвалидирует кэш для указанного маршрута.
• Это удобно, когда:
  • данные меняются по событию (например, после server action),
  • вы не хотите ждать стандартный интервал revalidate.
• revalidatePath работает только на сервере (в server actions, middleware, instrumentation и т.п.).

3.5. Соединение ISR и server actions

Комбинация, которую вы используете в модуле с оптимистичными обновлениями (13-forms/04-optimistic-updates), хорошо демонстрирует связку:

• server actions вносят изменения в БД,
• после успешной операции вызывается revalidatePath,
• серверная страница (которая использует findMany) получает обновлённые данные.

Пример действия с revalidatePath:

'use server';

import { PrismaClient } from '@prisma/client';
import { revalidatePath } from 'next/cache';

const prisma = new PrismaClient();

export async function createMessage(formData: FormData) {
  const content = formData.get('content');
  if (!content) return;

  await prisma.message.create({
    data: { content: content as string },
  });

  revalidatePath('/messages'); // путь к странице, которая читает эти сообщения
}

Серверная страница:

import { PrismaClient } from '@prisma/client';
import { Messages } from './Messages';

const prisma = new PrismaClient();

export const revalidate = 0; // опционально: отключить кэш

export default async function MessagesPage() {
  const messages = await prisma.message.findMany();

  return <Messages messages={messages} />;
}

Принципы:

• Если вы хотите полный контроль через server actions, можно вообще не использовать revalidate и управлять кэшем вручную.
• revalidatePath удобно вызывать там, где происходит изменение данных.

3.6. Когда использовать SSR, ISR и статику

Опираясь на ваш код и паттерны:

• Статика (без revalidate, без fetch с динамическими данными):
  • документация, статические страницы;
  • контент, который почти не меняется.
• ISR (revalidate):
  • списки товаров, блог, каталог;
  • данные, которые обновляются раз в минуты/часы;
  • позволяет сочетать производительность статики и актуальность данных.
• SSR (динамические данные без кэша):
  • личные кабинеты, данные, зависящие от пользователя;
  • часто меняющиеся данные, где кэш не нужен;
  • можно включить через export const revalidate = 0 или динамические fetch.

3.7. Практические рекомендации

• Начинайте с ISR (указывая разумный revalidate) — это часто лучший баланс.
• Добавляйте revalidatePath:
  • после server actions, которые меняют БД;
  • для страниц, зависящих от этих данных.
• Используйте generateStaticParams:
  • для предгенерации популярных/известных страниц;
  • особенно полезно в связке с динамическими сегментами ([slug], [id]).
• Не забывайте про метаданные:
  • generateMetadata может повторно использовать данные, чтобы <title> всегда был актуальным.

Эти паттерны из ваших модулей 14-isr и 13-forms формируют крепкий фундамент для работы с данными в Next.js: от статических страниц до динамических, от кэша до ручной ревалидации.