Hogyan olvassuk be az adatokat az App Routerben?

Question

Accepted Answer

Az App Routerben az adatokat **közvetlenül az async Server Components belsejében** olvassuk be a standard `fetch` API segítségével — nincs `getServerSideProps`, nincs `useEffect`, nincs külön adatréteg. A Next.js kiterjeszti a `fetch` API-t cache-vezérlési lehetőségekkel. ## Az alapvető minta ```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}

; } ``` Mivel a komponens a szerveren fut, egyszerűen csak `await`-eljük az adatainkat és felhasználjuk — sokkal egyszerűbb, mint az ügyfél oldali `useEffect` + `useState` + betöltési állapot tánc. ## A cache-stratégia fetch-enkénti alapon állítható be A Next.js kiterjeszti a `fetch` API-t úgy, hogy minden hívás kiválaszthatja a saját renderelési viselkedését: ```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 ``` Ez az App Router egységes modellje: ahelyett, hogy egy oldal szintű stratégiát választanánk, az adatlekérési szinten vezérleljük a cache-elést. ## Párhuzamos lekérés a vízesések elkerüléséhez ```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()]); ``` Indítsunk független kéréseket együtt a `Promise.all` segítségével, hogy ne blokkoljanak egymást. ## Lekérés Client Components-ben ```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); ``` A Server Components fedik le a legtöbb szükségletet; használjon SWR/React Query-t az ügyfél oldali, interaktív vagy gyakran újravalidálandó adatokhoz. ## Kérelem deduplikáció A Next.js automatikusan **deduplikálja** az azonos `fetch` hívásokat egy egyetlen renderelésben — így ugyanazokat az adatokat lekérhetjük egy elrendezésben és egy oldalon dupla kérés nélkül. ## Miért fontos A közvetlen aszinkron adatlekérés a Server Components-ben az App Router egyik legnagyobb egyszerűsítése — nincs boilerplate, biztonságos szerver oldali hozzáférés, automatikus deduplikáció és fetch-nkénti cache-elés, amely egyben az SSG/SSR/ISR választásunk. Az független fetch-ek párhuzamosításának ismerete (vízesések elkerülése) a legfontosabb teljesítménypraktika.