İsteğe bağlı yeniden doğrulama (ISR) nasıl çalışır?

Question

Accepted Answer

**İsteğe bağlı yeniden doğrulama** veriler değiştiğinde **önbellekte depolanmış/statik sayfaları tam olarak geçersiz kılmanızı** sağlar — zamana dayalı bir aralık beklemek yerine. Bu, zamana dayalı ISR (`revalidate: N`) için tam bir tamamlayıcıdır.

## Zamana dayalı vs İsteğe bağlı

```tsx
// Time-based: page refreshes on a fixed schedule (may serve stale data up to N seconds)
export const revalidate = 3600; // every hour

// On-demand: refresh the INSTANT the underlying data changes — no waiting, no waste
```

Zamana dayalı ISR basittir ancak kusurludur: çok kısa = gereksiz yeniden oluşturma; çok uzun = eski içerik. İsteğe bağlı, bir değişiklik gerçekten gerçekleştiğinde kendi kodunuzdan yeniden doğrulamayı tetikleyerek bunu düzeltir.

## İki İsteğe Bağlı API

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

// 1. Tag your fetches, then invalidate by tag
await fetch("https://api/posts", { next: { tags: ["posts"] } });
revalidateTag("posts");      // refresh EVERY page/fetch tagged "posts"

// 2. Or invalidate a specific path
revalidatePath("/blog/my-post");
```

## Gerçek bir iş akışı: CMS webhook

```ts
// app/api/revalidate/route.ts — called by your CMS when an editor publishes
import { revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const secret = req.nextUrl.searchParams.get("secret");
  if (secret !== process.env.REVALIDATE_SECRET) {       // verify it's really your CMS
    return NextResponse.json({ ok: false }, { status: 401 });
  }
  revalidateTag("posts");                                // rebuild affected pages now
  return NextResponse.json({ revalidated: true });
}
```

Akış: editör CMS'de yayınlar → CMS webhook'unuzu çağırır → `revalidateTag("posts")` önbelleği geçersiz kılar → sonraki ziyaretçi yeni oluşturulan statik HTML alır. Sayfalar statik-hızlı kalır **ve** yayında hemen güncellenir.

## Server Action mutasyonundan sonra

```tsx
"use server";
export async function createPost(data) {
  await db.post.create({ data });
  revalidateTag("posts"); // user sees their new post immediately
}
```

## Neden önemli

İsteğe bağlı yeniden doğrulama size kutsal kaseyi verir: **gerçek zamanlı tazelikle statik performans**.

Yeniden doğrulama aralığını tahmin etmek yerine, içerik değiştiğinde tam olarak geçersiz kılarsınız — webhook'lar aracılığıyla (CMS yayını) veya Server Action mutasyonlarından sonra — `revalidateTag`/`revalidatePath` kullanarak.

Hem eski içeriği hem de israfçı aşırı yeniden oluşturmayı ortadan kaldırır ve ISR'yi öngörülemeyen şekilde güncellenen içerik için uygulanabilir hale getirir.