App Router'da verileri doğrudan async Server Components içinde standart fetch API kullanarak alırsınız — getServerSideProps yok, useEffect yok, ayrı veri katmanı yok. Next.js, fetch'i önbellek kontrolleriyle genişletir.
// app/posts/page.tsx — a Server Component
export default async function Posts() {
const res = await fetch("https://api.example.com/posts"); // runs on the server
const posts = await res.json();
return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
Bileşen sunucuda çalıştığından, verilerinizi basitçe await edersiniz ve kullanırsınız — istemci tarafı useEffect + useState + yükleme durumu dansından çok daha basit.
Next.js fetch'i genişletir, böylece her çağrı kendi işleme davranışını seçer:
fetch(url, { cache: "force-cache" }); // SSG — cached (default for static)
fetch(url, { cache: "no-store" }); // SSR — fresh every request
fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s
fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation
Bu, App Router'ın birleştirilmiş modelidir: sayfa düzeyinde bir strateji seçmek yerine, veri-alma düzeyinde önbelleği kontrol edersiniz.
// ❌ sequential — each awaits the previous (slow waterfall)
const user = await getUser();
const posts = await getPosts();
// ✅ parallel — both start at once
const [user, posts] = await Promise.all([getUser(), getPosts()]);
Bağımsız istekleri Promise.all ile birlikte başlatın, böylece birbirlerini engellemesinler.
"use client";
// for client-side data (e.g. after interaction), use a library like SWR or React Query
const { data } = useSWR("/api/user", fetcher);
Server Components çoğu ihtiyacı karşılar; istemci tarafı, etkileşimli veya sık-yeniden doğrulanan veriler için SWR/React Query kullanın.
Next.js, tek bir işlemede özdeş fetch çağrılarını otomatik olarak soyutlamayı kaldırır — böylece bir düzen ve sayfada aynı verileri çift istek olmadan alabilirsiniz.
Server Components'te doğrudan zaman uyumsuz veri alma, App Router'ın en büyük basitleştirmelerinden biridir — kiş ayakkabı kodu yok, güvenli sunucu tarafı erişim, otomatik soyutlama kaldırma ve her-fetch önbelleğe alma, SSG/SSR/ISR seçiminiz olarak çalışır.
Bağımsız alma işlemlerini paralelleştirmeyi (şelaleleri önlemeyi) bilmek, temel performans uygulamasıdır.