React Academy · Ders

Artımlı Statik Yeniden Oluşturma (ISR)

Statik sayfaları tam yeniden dağıtım yapmadan zamanlamaya göre veya isteğe bağlı olarak yeniden oluşturun.

Artımlı Statik Yeniden Oluşturma (ISR), CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

ISR Nedir

Artımlı Statik Yeniden Oluşturma, Next.js'in belirli bir aralıktan sonra arka planda yeniden oluştururken önceden oluşturulmuş statik bir sayfayı sunmasını sağlar; böylece statik HTML'nin hızı ile sunucu tarafında oluşturmanın güncelliğini birleştirir.

ISR Nasıl Çalışır

İlk istekte Next.js, önbelleğe alınmış statik HTML'yi sunar. Yeniden doğrulama aralığı sona erdikten sonra sonraki istek, arka planda yeniden oluşturmayı tetikler. Yeniden oluşturma tamamlandığında sonraki istekler yeni sayfayı sunar.

revalidate ile ISR'yi Etkinleştirme

Bir Sunucu Bileşeni sayfasında revalidate sabitini dışa aktarın veya bir veri getirme çağrısında next: { revalidate: N } ayarlayın.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

Dinamik Rotalarla ISR

Popüler dinamik sayfaları önceden oluşturmak ve bunları belirli bir programa göre yeniden doğrulamak için generateStaticParams ile revalidate'i birlikte kullanın.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

İsteğe Bağlı Yeniden Doğrulama

Belirli sayfaları hemen yeniden oluşturmak için bir Sunucu Eyleminden, API rotasından veya web kancası işleyicisinden revalidatePath() ya da revalidateTag() çağırın; aralığın dolmasını beklemeniz gerekmez.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Bilinmeyen Yollar için Geri Dönüş Davranışı

generateStaticParams içinde yer almayan dinamik rotalar için, isteğe bağlı olarak oluşturup önbelleğe almak üzere dynamicParams = true (varsayılan) ayarlayın veya 404 döndürmek için false kullanın.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Eski Veriyi Sunarken Yeniden Doğrulama

Yeniden oluşturma sırasında Next.js, yeni sürüm hazır olana kadar eski sayfayı sunar. Kullanıcılar her zaman bir yanıt alır; güncel veriler için beklemeleri gerekmez.

ISR ve SSR ile Statik Oluşturma Karşılaştırması

Statik: bir kez oluşturulur, hiç değişmez. ISR: önceden oluşturulur ve programa göre yeniden oluşturulur. SSR: her istekte güncel olarak oluşturulur. Ara sıra değişen ancak statik sunum hızından yararlanan içerikler için ISR'yi seçin.

ISR'nin Dikkat Edilmesi Gereken Yönleri

ISR, kişiselleştirilmiş içerikler (kullanıcıya özgü veriler) veya gerçek zamanlı olması gereken veriler için uygun değildir. Bu durumlarda no-store veri getirmelerini ve SSR'yi kullanın.

Pages Router'da ISR (getStaticProps)

Pages Router'da ISR, getStaticProps ile birlikte bir revalidate dönüş değeri kullanır; kavram aynıdır, API farklıdır.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

ISR'yi Doğrulama

x-nextjs-cache yanıt üstbilgisini kontrol edin: HIT, önbellekten sunulduğu; MISS, yeni oluşturulduğu; STALE ise yeniden doğrulama sürerken eski verinin sunulduğu anlamına gelir.

Hızlı Kontrol

Bir kullanıcı, yeniden doğrulama aralığı henüz sona ermiş bir ISR sayfasını istediğinde ne olur?

Özet

ISR, sayfaları önceden oluşturur ve export const revalidate = N aracılığıyla her N saniyede bir yeniden doğrular. Popüler dinamik rotalar için generateStaticParams kullanın; değişikliklerden sonra hemen güncellik sağlamak için revalidatePath/Tag ile isteğe bağlı yeniden doğrulamayı kullanın.

Sıkça Sorulan Sorular

“Artımlı Statik Yeniden Oluşturma (ISR)” dersi ücretsiz mi?

Evet — “Artımlı Statik Yeniden Oluşturma (ISR)” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Artımlı Statik Yeniden Oluşturma (ISR)” dersinde ne öğreneceğim?

Statik sayfaları tam yeniden dağıtım yapmadan zamanlamaya göre veya isteğe bağlı olarak yeniden oluşturun. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Artımlı Statik Yeniden Oluşturma (ISR)” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Next.js'te Önbellek Seçenekleriyle fetch()
unstable_cache ve React cache()
Artımlı Statik Yeniden Oluşturma (ISR)
Veri Değişiklikleri için Sunucu Eylemleri

← React Academy Sayfasına Dön