Come recuperi i dati nell'App Router?

Question

Accepted Answer

Nell'App Router recuperi i dati **direttamente all'interno di async Server Components** usando l'API `fetch` standard — niente `getServerSideProps`, niente `useEffect`, niente data layer separato. Next.js estende `fetch` con controlli di caching. ## Lo schema di base ```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}

; } ``` Poiché il componente gira sul server, semplicemente `await` i tuoi dati e usali — molto più semplice della danza client-side `useEffect` + `useState` + loading-state. ## La strategia di caching si imposta per-fetch Next.js potenzia `fetch` così che ogni chiamata scelga il proprio comportamento di rendering: ```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 ``` Questo è il modello unificato dell'App Router: invece di scegliere una strategia a livello di pagina, controlli il caching a livello di data-fetch. ## Fetching parallelo per evitare cascate ```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()]); ``` Avvia richieste indipendenti insieme con `Promise.all` così non si bloccano a vicenda. ## Fetching nei 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); ``` I Server Components coprono la maggior parte delle necessità; usa SWR/React Query per dati client-side, interattivi o che devono essere revalidati frequentemente. ## Request deduplication Next.js automaticamente **deduplica** le chiamate `fetch` identiche in un singolo render — così puoi recuperare gli stessi dati in un layout e in una pagina senza una doppia richiesta. ## Perché è importante Il fetching diretto di dati async nei Server Components è una delle più grandi semplificazioni dell'App Router — niente boilerplate, accesso sicuro lato server, deduplication automatica, e caching per-fetch che raddoppia come scelta SSG/SSR/ISR. Sapere come parallelizzare fetch indipendenti (evitando cascate) è la pratica di performance chiave.