Jak načítáte data v App Routeru?

Question

Accepted Answer

V App Routeru načítáte data **přímo uvnitř async Server Components** pomocí standardního API `fetch` — žádný `getServerSideProps`, žádný `useEffect`, žádná samostatná datová vrstva. Next.js rozšiřuje `fetch` o ovládání cachování. ## Základní vzor ```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}

; } ``` Proto že komponenta běží na serveru, jednoduše `await` vaše data a používáte je — mnohem jednodušší než tanec `useEffect` + `useState` + stav načítání na straně klienta. ## Strategie cachování je nastavena pro každý fetch Next.js rozšiřuje `fetch` tak, aby každé volání zvolilo své chování při renderování: ```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 ``` Toto je jednotný model App Routeru: namísto výběru strategie na úrovni stránky, kontrolujete cachování na úrovni načítání dat. ## Paralelní načítání, aby se zabránilo kaskádám ```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()]); ``` Spusťte nezávislé požadavky dohromady s `Promise.all`, aby se navzájem neblokovali. ## Načítání v 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 pokrývají většinu potřeb; používejte SWR/React Query pro data na straně klienta, interaktivní nebo často revalidovaná data. ## Deduplikace požadavků Next.js automaticky **deduplikuje** identická volání `fetch` v jednom renderování — takže můžete načíst stejná data v layoutu a stránce bez duplikovaného požadavku. ## Proč je to důležité Přímé asynchronní načítání dat v Server Components je jedním z největších zjednodušení App Routeru — žádný boilerplate, bezpečný přístup na straně serveru, automatická deduplikace a cachování pro každý fetch, které slouží i jako vaše volba SSG/SSR/ISR. Znalost paralelizace nezávislých fetchů (aby se zabránilo kaskádám) je klíčová praktika výkonu.