Bagaimana Anda mengambil data di App Router?

Question

Accepted Answer

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. ## Pola dasar ```tsx // 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

{p.title}

; } ``` Karena komponen berjalan di server, Anda cukup `await` data Anda dan menggunakannya — jauh lebih sederhana daripada tarian `useEffect` + `useState` + loading-state sisi klien. ## Strategi caching diatur per-fetch Next.js memperluas `fetch` sehingga setiap panggilan memilih perilaku renderingnya sendiri: ```tsx 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. ## Pengambilan paralel untuk menghindari cascading ```tsx // ❌ 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. ## Pengambilan di Client Components ```tsx "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. ## Deduplikasi permintaan 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. ## Mengapa ini penting 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.