Özet - SSR ve SSG

Statik bir ana sayfa ve dinamik bir ürün sayfası kurarsın.

Özet - SSR ve SSG

Bu grupta SSR, SSG ve Server Components'i gördün. SSR her istekte sunucuda çizim yapar; SSG build sırasında bir kez çizip statik HTML üretir. RSC ise JavaScript göndermeden sunucuda çalışır.

İnteraktif öğeler için "use client" direktifi ile Client Component oluşturursun. Sunucu ve istemci ayrımı, JavaScript'i küçük tutar.

Şimdi bir karma sayfa yaz: Server Component + Client Counter birlikte.

Uygulama Karma sayfa

Page bileşeni yaz (Server Component): async olsun, await fetch('https://api.example.com/post') ile veri çek, JSON'a çevir, <article><h1>{data.title}</h1></article> bas. Ayrıca Counter Client Component'ini import et ve <Counter /> bas. export default Page. Import ifadesini de yaz: import Counter from "./counter".

Örnek çözümü göster

// app/page.js
import Counter from "./counter";

export default async function Page() {
  const r = await fetch("https://api.example.com/post");
  const data = await r.json();
  return (
    <article>
      <h1>{data.title}</h1>
      <Counter />
    </article>
  );
}

Kendini test et

Hangi senaryo SSG'ye en uygun?
- Kullanıcıya özel sepet
- Anlık sohbet mesajları
- Canlı stok verisi
- Build sırasında bilinen blog yazıları
Cevabı göster

Build sırasında bilinen blog yazıları — Blog yazıları build sırasında biliniyorsa SSG'ye uyar.

Client directive

// app/like.js
"____"

import { useState } from "react";

export default function Like() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Cevabı göster

// app/like.js
"use client"

import { useState } from "react";

export default function Like() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Sıradaki ders: API rotaları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler