Next.js'te Dynamic Routes (`[id].js`) kullanırken getStaticPaths ile fallback: true/blokking/false seçimi

stackor · Dün 13:34 da

Merhaba arkadaşlar, bugün Next.js'te dinamik sayfalar oluştururken benim de kafamı bir dönem epey karıştıran bir konudan bahsedeceğim: `getStaticPaths` fonksiyonunun `fallback` seçeneği. `[id].js` gibi bir dosya açtınız, `getStaticPaths` ile yolları belirttiniz ama `fallback`'i ne yapacağınıza karar veremiyorsunuz. İlk projemde bu ayarı yanlış yapınca, kullanıcılar 404 sayfasına düşüyor ya da beyaz ekran görüyordu. İşte bu üç modun (`false`, `blocking`, `true`) arasındaki farkları ve hangi senaryoda hangisini kullanmanız gerektiğini, tecrübelerimle birlikte anlatacağım.

Fallback Nedir ve Neden Önemli?

Basitçe söylemek gerekirse, `fallback`, `getStaticPaths` fonksiyonunda önceden tanımlanmamış (yani build zamanında oluşturulmamış) dinamik yollara bir kullanıcı girdiğinde ne olacağını kontrol eder. Mesela, `/products/1` ve `/products/2` için statik sayfa oluşturduk ama veritabanımıza sonradan `id`'si `3` olan bir ürün eklendi. Birisi `/products/3`'e girerse ne olacak? İşte `fallback` burada devreye giriyor.

Fallback: false (En Basit ve En Güvenli)

Bu, varsayılan ve en güvenli seçenektir. Eğer `getStaticPaths` fonksiyonunuzda `paths` dizisine koymadığınız bir yol istenirse, Next.js doğrudan 404 sayfasını gösterir.

Bu seçeneği ne zaman kullanmalısınız? Eğer dinamik yollarınızın tamamı build zamanında belli ve çok sık değişmiyorsa (örneğin, bir blog yazıları dizini veya sabit ürün kataloğu), bu en temiz çözümdür. Performans mükemmeldir ve beklenmeyen yollar için 404 sayfası kullanıcı deneyimi açısından doğrudur.

JavaScript:

// pages/products/[id].js
export async function getStaticPaths() {
  // Sadece 1 ve 2 ID'li ürünler için sayfa oluştur
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ];

  return {
    paths,
    fallback: false // Sadece 1 ve 2 çalışır. 3 için 404.
  };
}

Fallback: blocking (SSG'yi SSR gibi Hissetmek)

Bu seçenek biraz daha ilginç. Eğer istenen yol önceden oluşturulmamışsa, Next.js sayfayı sunucuda anında oluşturur (generate eder) ve kullanıcıya hazır olduğunda gönderir. Bu sırada kullanıcı hiçbir şey görmez, sayfa yükleniyor gibi durur (browser spinner'ı döner). Sayfa bir kere oluşturulduktan sonra, CDN'de önbelleğe alınır ve bir daha aynı yol istenirse statik olarak sunulur.

Ne zaman kullanılır? İçeriğiniz sık güncelleniyor (örneğin haber siteleri, yeni kullanıcı profilleri) ve her yeni içerik için tekrar build atmak istemiyorsanız harika bir çözüm. Ayrıca, `fallback: true`'daki "yükleniyor" durumunu göstermek için ekstra kod yazmak istemiyorsanız, bu daha temiz olabilir.

JavaScript:

export async function getStaticPaths() {
  // İlk build'de sadece popüler ürünleri oluştur
  const res = await fetch('https://.../popular-products');
  const popularProducts = await res.json();

  const paths = popularProducts.map(product => ({
    params: { id: product.id.toString() },
  }));

  return {
    paths,
    fallback: 'blocking' // Yeni bir ID gelirse, sunucuda oluştur ve önbelleğe al.
  };
}

Fallback: true (En Dinamik ve En Esnek)

Benim kişisel olarak birçok projemde kullandığım mod budur. `fallback: true` ayarlandığında, önceden oluşturulmamış bir yol için Next.js hemen boş bir sayfanın HTML'sini (props'lar olmadan) gönderir. Ardından, tarayıcıda `getStaticProps` çalıştırılır, veriler yüklenir ve sayfa istemci tarafında doldurulur.

Buradaki KRİTİK NOKTASI, sayfa ilk yüklendiğinde `router.isFallback` değerini kontrol edip, bir yükleniyor (loading) göstermeniz GEREKTİĞİDİR. Bunu yapmazsanız, kullanıcı boş bir sayfa görür ve kafası karışır.

Ne zaman kullanılır? Binlerce sayfanız varsa ve hepsini build'lemek saatler sürüyorsa, sadece en önemlilerini (`paths` olarak) build zamanında oluşturup, geri kalanını `fallback: true` ile "lazy" bir şekilde oluşturabilirsiniz. Bu, build sürelerini inanılmaz kısaltır.

JavaScript:

import { useRouter } from 'next/router';

function ProductPage({ product }) {
  const router = useRouter();

  // Fallback sayfaları için yükleniyor gösterimi ZORUNLU!
  if (router.isFallback) {
    return <div>[COLOR=#E74C3C]🔄 Ürün bilgileri yükleniyor...[/COLOR]</div>;
  }

  // Normal sayfa içeriği
  return <h1>{product.name}</h1>;
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: 'featured-1' } }], // Sadece öne çıkan ürün
    fallback: true // Diğer tüm ID'ler için fallback aktif.
  };
}

export async function getStaticProps({ params }) {
  // params.id ile veriyi çek
  const res = await fetch(`https://.../products/${params.id}`);
  const product = await res.json();

  return {
    props: { product },
    revalidate: 60 // 60 saniyede bir sayfayı yeniden oluştur (ISR)
  };
}

Hangisini Seçmeliyim? Özet Tablo

Hızlı bir karar vermeniz için kendi kullandığım basit kılavuz şu:
- fallback: false: Yollarım sabit ve az sayıda. Değişiklik olursa yeniden build ederim. (Basit Blog)
- fallback: 'blocking': Yollarım sık ekleniyor, kullanıcının yükleniyor durumu görmesini istemiyorum, sunucu tarafında oluşturulsun yeter. (Haber Portalı, Kullanıcı Profilleri)
- fallback: true: Çok fazla sayfam var (on binlerce). Build süremi kısaltmak ve kullanıcıya anında bir "yükleniyor" feedback'i vermek istiyorum. (E-ticette ürün detay sayfaları)

Umarım bu açıklamalar, Next.js'te dinamik routing yaparken karar vermenizi kolaylaştırır. Siz projelerinizde genellikle hangi `fallback` modunu tercih ediyorsunuz? `fallback: true` kullanırken `router.isFallback` kontrolünü unuttuğunuz ve kafayı yediğiniz oldu mu? Yorumlarda deneyimlerinizi paylaşın!

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Next.js'te Dynamic Routes (`[id].js`) kullanırken getStaticPaths ile fallback: true/blokking/false seçimi

stackor

Tema özelleştirme sistemi

Tam ekran yada dar ekran