Piye carane kanggo ngambil data ing App Router?

Question

Accepted Answer

Ing App Router sampeyan ngambil data **langsung ing dalam async Server Components** nggunakake standard `fetch` API — ora `getServerSideProps`, ora `useEffect`, ora data layer misah. Next.js nggedhekake `fetch` karo 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}

; } ``` Amarga komponen lan ing server, sampeyan mung `await` data sampeyan lan gunakake - luwih prasaja tinimbang client-side `useEffect` + `useState` + loading-state ing jero. ## Strategi caching diset saben-fetch Next.js nggedhekake `fetch` supaya saben panggilan milih prilaku render dhewe: ```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 ``` Iki minangka model unified App Router: tinimbang milih strategi tingkat halaman, sampeyan kontrol caching ing tingkat data-fetch. ## Fetching paralel kanggo nyegah curug ```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()]); ``` Mulai panjaluk independen bebarengan karo `Promise.all` supaya ora ngalangi siji liyane. ## Fetching ing 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 nutup kabutuhan paling akeh; gunakake SWR/React Query kanggo data client-side, interaktif, utawa sing kudu di-revalidate asring-asring. ## Deduplication panjaluk Next.js kanthi otomatis **dedupe** panggilan `fetch` identikal ing siji render — dadi sampeyan bisa ngambil data sing padha ing layout lan halaman tanpa panjaluk loro. ## Apa gunane Pengambilan data async langsung ing Server Components minangka salah sawijining penyederhanaan paling gedhe App Router — tanpa boilerplate, akses aman server-side, deduping otomatis, lan caching saben-fetch sing loro dadi pilihan SSG/SSR/ISR. Ngerti kanggo parallelisasi fetches independen (nyegah curug) minangka praktik performa kunci.