Стратегії рендерингу: SSR, SSG та ISR в Next.js

Клієнт A                      Edge CDN                   Фоновий Воркер (Node.js)
          │                             │                                 │
   (1)    ├──── GET /product/42 ───────►│                                 │
          │                             │ [Кеш свіжий: age < 60s]         │
          │◄─── 200 OK (HTML/RSC) ──────┤                                 │
          │                             │                                 │
   ═══════╪═════════════════════════════╪═════════════════════════════════╪═══════
          │   (Минуло 65 секунд: кеш став STALE)                          │
          │                             │                                 │
   (2)    │  Клієнт B                   │                                 │
          ├──── GET /product/42 ───────►│                                 │
          │                             │ [Кеш застарів! Віддаємо stale]  │
          │◄─── 200 OK (STALE копія) ───┤                                 │
          │                             │                                 │
          │                             ├── Асинхронний тригер рендеру ──►│
          │                             │                                 ├── Запит до БД
          │                             │                                 ├── Генерація HTML/RSC
          │                             │◄── Новий HTML/RSC Payload ──────┤
          │                             │ [Кеш оновлено: age = 0s]        │
          │                             │                                 │
   (3)    │  Клієнт C                   │                                 │
          ├──── GET /product/42 ───────►│                                 │
          │                             │ [Кеш свіжий!]                   │
          │◄─── 200 OK (СВІЖІ дані) ────┤                                 │

// 1. Примусовий Dynamic SSR (жодного кешування сторінки)
export const dynamic = 'force-dynamic';

// 2. Примусовий SSG (динамічні функції повернуть порожні значення)
// export const dynamic = 'force-static';

// 3. Time-based ISR: ревалідувати сторінку не частіше одного разу на 60 секунд
// export const revalidate = 60;

// 4. Поведінка для параметрів, не згенерованих у generateStaticParams:
// true: генерувати динамічно при першому запиті та зберігати в ISR (за замовчуванням)
// false: повертати 404
export const dynamicParams = true;

export default async function DashboardPage() {
  return <div>Динамічна панель управління</div>;
}

// 1. SSG: Безстрокове кешування (Permanent Data Cache)
const staticData = await fetch('https://api.example.com/config', {
  cache: 'force-cache'
});

// 2. Time-based ISR: Кешування з інвалідацією за часом (1 година)
const timedData = await fetch('https://api.example.com/products', {
  next: { 
    revalidate: 3600,
    tags: ['products-list'] // Тег для скидання за вимогою
  }
});

// 3. SSR: Запит без кешування (поведінка Next.js 15+ за замовчуванням)
const liveData = await fetch('https://api.example.com/notifications', {
  cache: 'no-store'
});

'use server';

import { revalidateTag, revalidatePath } from 'next/cache';
import { db } from '@/lib/db';

interface UpdateProductDTO {
  title: string;
  price: number;
}

export async function updateProduct(id: string, data: UpdateProductDTO): Promise<{ success: boolean }> {
  // 1. Мутація даних у БД
  await db.product.update({
    where: { id },
    data
  });

  // 2. Інвалідація конкретного кеш-тегу (точково скидає пов'язані запити)
  revalidateTag(`product-${id}`);

  // 3. Інвалідація маршруту каталогу
  revalidatePath('/catalog', 'page');

  return { success: true };
}

import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

// Огортаємо функцію доступу до БД у кешуючий шар Next.js
export const getCachedPost = unstable_cache(
  async (slug: string) => {
    return await db.post.findUnique({
      where: { slug }
    });
  },
  ['post-by-slug'], // Ключові частини кешу (Key parts)
  {
    revalidate: 300, // ISR: 5 хвилин
    tags: ['posts']  // Тег для On-demand скидання через revalidateTag('posts')
  }
);

import { notFound } from 'next/navigation';
import { db } from '@/lib/db';

interface PageProps {
  params: Promise<{ id: string }>; // У Next.js 15+ доступ суворо асинхронний
}

// 1. Попередня збірка топ-100 популярних сторінок при білді
export async function generateStaticParams() {
  const popularProducts = await db.product.findMany({
    where: { isPopular: true },
    take: 100,
    select: { id: true }
  });

  return popularProducts.map((p) => ({ id: p.id }));
}

// 2. Дозволяємо генерацію решти 199 900 товарів на льоту при першому візиті
export const dynamicParams = true;

// 3. Оновлювати сторінку у фоні не частіше ніж раз на 10 хвилин
export const revalidate = 600;

export default async function ProductPage({ params }: PageProps) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });

  if (!product) {
    notFound();
  }

  return (
    <article className="p-8 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold">{product.title}</h1>
      <p className="text-2xl font-mono text-accent-cyan mt-2">{product.price} ₴</p>
      <div className="mt-4 text-text-muted leading-relaxed">{product.description}</div>
    </article>
  );
}

import { NextRequest, NextResponse } from 'next/server';
import { revalidateTag } from 'next/cache';

export async function POST(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');

  // Захист ендпоінта секретним токеном
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ message: 'Невірний токен' }, { status: 401 });
  }

  const body = (await request.json()) as { tag?: string };

  if (!body.tag) {
    return NextResponse.json({ message: 'Тег не передано' }, { status: 400 });
  }

  // Миттєве скидання Data Cache для всіх запитів із цим тегом
  revalidateTag(body.tag);

  return NextResponse.json({ revalidated: true, tag: body.tag, now: Date.now() });
}

// Для SSG:
const res = await fetch(url, { cache: 'force-cache' });

// Для ISR:
const res = await fetch(url, { next: { revalidate: 60 } });

// components/CartBadge.tsx (Server Component у сайдбарі)
import { cookies } from 'next/headers';

export async function CartBadge() {
  const cookieStore = await cookies(); // ❌ Ламає SSG/ISR для всього сайту без Suspense!
  const cartId = cookieStore.get('cartId')?.value;
  return <span>{cartId ? 'Товарів: 1' : 'Кошик порожній'}</span>;
}