Di App Router Anda mengambil data langsung di dalam async Server Components menggunakan API fetch standar — tanpa getServerSideProps, tanpa useEffect, tanpa lapisan data terpisah. Next.js memperluas fetch dengan kontrol caching.
// 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>;
}
Karena komponen berjalan di server, Anda cukup await data Anda dan menggunakannya — jauh lebih sederhana daripada tarian useEffect + useState + loading-state sisi klien.
Next.js memperluas fetch sehingga setiap panggilan memilih perilaku renderingnya sendiri:
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
Ini adalah model terpadu App Router: alih-alih memilih strategi tingkat halaman, Anda mengendalikan caching pada tingkat data-fetch.
// ❌ 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()]);
Kick off permintaan independen bersama dengan Promise.all sehingga mereka tidak saling memblokir.
"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 mencakup sebagian besar kebutuhan; gunakan SWR/React Query untuk data sisi klien, interaktif, atau yang sering divalidasi ulang.
Next.js secara otomatis mendedup panggilan fetch identik dalam satu render — jadi Anda dapat mengambil data yang sama di tata letak dan halaman tanpa permintaan ganda.
Pengambilan data async langsung di Server Components adalah salah satu penyederhanaan terbesar App Router — tanpa boilerplate, akses sisi server yang aman, dedup otomatis, dan caching per-fetch yang berfungsi sebagai pilihan SSG/SSR/ISR Anda.
Mengetahui cara memparalelkan pengambilan independen (menghindari cascading) adalah praktik kinerja yang paling penting.