Duzenleme Modu Destegiyle Statik Isleme

Bu kılavuz, dokümanlar sitesinin CMS düzenleme modu işlevselliğini korurken hızlı statik sayfa yüklemelerini nasıl gerçekleştirdiğini açıklar.

Çift Rotalı Mimari

Aynı içerik için iki rota kullanıyoruz:

app/
├── [...slug]/page.tsx          # Üretim: force-static (hızlı)
└── preview/[...slug]/page.tsx  # Düzenleme modu: force-dynamic (searchParams okur)

Bir proxy ara katmanı, düzenleme modu isteklerini şeffaf bir şekilde yeniden yazar:

Kullanıcı isteği: /en/headless/quickstart?edit_mode=true
       ↓
Proxy ?edit_mode=true değerini algılar
       ↓
Dahili yeniden yazma: /preview/en/headless/quickstart?edit_mode=true
       ↓
Dinamik rota düzenleme sarmalayıcılarıyla işler

Kullanıcı, URL'sinde asla /preview görmez - bu dahili bir yeniden yazmadır.

Nasıl Çalışır

Üretim Yolu (Varsayılan)

// app/[...slug]/page.tsx
export const dynamic = 'force-static';
export const revalidate = 60;

export default async function Page({ params }) {
  // searchParams yok - sayfa tamamen statiktir
  return

• Sayfalar derleme sırasında önceden oluşturulur
• CDN uç önbelleğinden anında sunulur
• Bir güvenlik ağı olarak her 60 saniyede bir (ISR) yeniden doğrulanır

Düzenleme Modu Yolu

// app/preview/[...slug]/page.tsx
export const dynamic = 'force-dynamic';

export default async function PreviewPage({ params, searchParams }) {
  // searchParams mevcut - edit_mode algılanabilir
  return <ParametricRoutePage params={params

• Her istekte yeniden işlenir
• URL'den ?edit_mode=true değerini okuyabilir
• CMS düzenlenebilir sarmalayıcılar ve blok konturlarıyla render eder

Proxy Yeniden Yazması

// src/proxy.ts
export const proxy = async (request: NextRequest) => {
  const { pathname, searchParams } = request.nextUrl;

  const editMode = searchParams.get('edit_mode');

Performans Karşılaştırması

ISR'ı (Artımlı Statik Yenileme) Anlamak

revalidate = 60 ayarı ISR'ı etkinleştirir. Bu, sayfaların her 60 saniyede bir yeniden hesaplandığı anlamına GELMEZ.

ISR, stale-while-revalidate desenini kullanır:

İstek gelir:
  → Önbellekteki sayfa < 60 sn mi? → Önbellekten sun (anında)
  → Önbellekteki sayfa > 60 sn mi? → Bayat önbelleği sun (anında)
                                + bir sonraki istek için arka planda yeniden doğrula

İstek yok = Yeniden hesaplama yok. Asla.

Örnek:

• Sayfa 10:00'da önbelleğe alındı
• 15:00'e kadar ziyaretçi yok
• 15:00'teki ilk ziyaretçi anında bayat önbelleği alır
• Arka planda yenileme gerçekleşir, bir sonraki ziyaretçi taze içeriği alır

60 saniyelik pencere bir güvenlik ağıdır. İdeal olarak, CMS içeriği değiştiğinde webhook'lar aracılığıyla isteğe bağlı yeniden doğrulama kullanırdık.

Her Rotayı Ne Zaman Kullanmalı

Neden Sadece Dinamik İşlemeyi Kullanmayalım?

Basit yaklaşım (force-static yok, önizleme rotası yok) işe yarar ama yavaştır:

// Basit yaklaşım - çalışır ama istek başına ~1-2 sn
export default async function Page({ params, searchParams }) {
  return <ParametricRoutePage params={params} searchParams={searchParams} />;
}

Bu, her istekte dinamik olarak render eder. Birçok sayfaya sahip bir dokümantasyon sitesi için bu şu anlama gelir:

• Her sayfada soğuk başlangıçlar
• CDN uç önbelleği avantajı yok
• Milisaniyelere karşı 1-2 saniyelik yükleme süreleri

Çift rotalı mimari bize her iki dünyanın en iyisini sunar: okurlar için statik hız, editörler için dinamik işlevsellik.