Frontend Academy · Ders

SSG, SSR ve ISR

3. ders / 414 adım

SSG, SSR ve ISR, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Üç Oluşturma Stratejisi

Next.js sayfaları oluşturmak için üç yol destekler: SSG (Statik Site Oluşturma), SSR (Sunucu Tarafında Oluşturma) ve ISR (Artımlı Statik Yeniden Oluşturma). Her birinin farklı ödünleri vardır.

SSG — Derleme Zamanında Oluşturma

Sayfalar derleme zamanında statik HTML olarak oluşturulur ve bir CDN üzerinden sunulur. Mümkün olan en hızlı teslimatı sağlar. Şunlar için en uygundur: tanıtım sayfaları, bloglar ve belgeler.

Sayfalar Yönlendiricisi'nde SSG

Bir sayfadan getStaticProps dışa aktarın. İşlev derleme zamanında çalışır ve bileşene props sağlar.

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

Uygulama Yönlendiricisi'nde SSG

Varsayılan olarak eşzamansız Sunucu Bileşenleri verileri derleme zamanında çeker. Dinamik rotalar için generateStaticParams kullanın.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR — İstek Başına Oluşturma

Sayfalar her istekte oluşturulur. İçeriğin kullanıcıya özel olduğu veya önbelleğe alınamayacak kadar sık değiştiği durumlarda kullanın.

Sayfalar Yönlendiricisi'nde SSR

getServerSideProps dışa aktarın.

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

Uygulama Yönlendiricisi'nde SSR

dynamic = 'force-dynamic' kullanarak veya çerezleri/üstbilgileri okuyarak istek başına oluşturmayı zorunlu kılın; bu işlemler statik oluşturmayı otomatik olarak devre dışı bırakır.

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — İki Dünyanın En İyisi

ISR: statik bir sayfa sunar, ancak her N saniyede bir arka planda yeniden oluşturur. SSG'nin hızını görece güncel verilerle birleştirir.

Sayfalar Yönlendiricisi'nde ISR

getStaticProps içine revalidate ekleyin.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

Uygulama Yönlendiricisi'nde ISR

Veri çekme seçeneklerinde next: { revalidate: N } kullanın veya bir sayfada export const revalidate = N tanımlayın.

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

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

Zaman aralığını beklemeden yeniden oluşturmayı manuel olarak tetikleyin (örneğin bir CMS web kancasıyla).

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

Doğru Stratejiyi Seçme

Veriler nadiren değişiyorsa SSG kullanın (tanıtım, belgeler, blog). Veriler ara sıra güncelleniyorsa ISR kullanın (CMS tabanlı siteler, e-ticaret listeleri). Kullanıcıya özel içerik için SSR kullanın (panolar, hesap sayfaları).

Hızlı Kontrol

ISR (Artımlı Statik Yeniden Oluşturma), saf SSG'nin yapamadığı neyi yapar?

İnteraktif derste cevapla

Özet: SSG, SSR, ISR

SSG: derleme zamanında, en hızlı, sabit içerik. SSR: istek başına, dinamik, daha yavaş. ISR: SSG + zamanlanmış arka plan yeniden oluşturması — görece güncel + hızlı. Sayfalar Yönlendiricisi getStaticProps/getServerSideProps kullanır. Uygulama Yönlendiricisi, veri çekme işleminde async Sunucu Bileşenleri ile revalidate veya sayfa düzeyinde revalidate sabitini kullanır. İsteğe bağlı güncellemeler için revalidatePath ve etiket kullanılır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 41
Dersler: 163

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“SSG, SSR ve ISR” dersi ücretsiz mi?

Evet — “SSG, SSR ve 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“SSG, SSR ve ISR” dersinde ne öğreneceğim?

Sayfaları derleme zamanında statik olarak oluşturmayı, istek başına sunucuda işlemeyi veya Incremental Static Regeneration ile önbelleğe alınmış sayfaları belirli aralıklarla yeniden doğrulamayı öğre… Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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.

“SSG, SSR ve 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

← Frontend Academy Sayfasına Dön