Cum iei date în App Router?

Question

Accepted Answer

În App Router preiei date **direct în interiorul async Server Components** folosind API-ul standard `fetch` — fără `getServerSideProps`, fără `useEffect`, fără strat de date separat. Next.js extinde `fetch` cu comenzi de cache. ## Modelul de bază ```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}

; } ``` Deoarece componenta se execută pe server, pur și simplu `await` datele tale și le folosești — mult mai simplu decât dansul `useEffect` + `useState` + loading-state din partea clientului. ## Strategia de cache este setată per-fetch Next.js augmentează `fetch` pentru ca fiecare apel să-și aleagă comportamentul de redare: ```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 ``` Acesta este modelul unificat al App Router: în loc să alegi o strategie la nivel de pagină, controlezi cachingul la nivel de preluare de date. ## Preluare paralelă pentru a evita cascadele ```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()]); ``` Pornește cererile independente împreună cu `Promise.all` pentru ca să nu se blocheze reciproc. ## Preluare în 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 acoperă cele mai multe nevoi; folosește SWR/React Query pentru date de pe client, interactive sau frecvent revalidate. ## Deduplicare de cereri Next.js **deduplicat** automat apelurile `fetch` identice într-o singură redare — pentru că poți prelua aceleași date într-un layout și o pagină fără o cerere dublă. ## De ce este important Preluarea directă de date async în Server Components este una dintre cele mai mari simplificări ale App Router — fără boilerplate, acces sigur pe server, deduplicare automată și cache per-fetch care dublează alegerea ta SSG/SSR/ISR. A ști să paralelizezi preluri independente (evitând cascadele) este practica cheie de performanță.