Como você busca dados no App Router?

Question

Accepted Answer

No App Router você busca dados **diretamente dentro de async Server Components** usando a API `fetch` padrão — sem `getServerSideProps`, sem `useEffect`, sem camada de dados separada. O Next.js estende `fetch` com controles de cache. ## O padrão básico ```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}

; } ``` Como o componente é executado no servidor, você simplesmente `await` seus dados e os usa — muito mais simples do que a dança `useEffect` + `useState` + loading-state do lado do cliente. ## A estratégia de cache é definida por busca O Next.js aumenta `fetch` para que cada chamada escolha seu comportamento de renderização: ```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 ``` Este é o modelo unificado do App Router: em vez de escolher uma estratégia no nível da página, você controla o cache no nível da busca de dados. ## Buscas paralelas para evitar cascatas ```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()]); ``` Inicie solicitações independentes juntas com `Promise.all` para que não se bloqueiem mutuamente. ## Buscando em 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 cobrem a maioria das necessidades; use SWR/React Query para dados do lado do cliente, interativos ou frequentemente revalidados. ## Deduplicação de solicitação O Next.js **deduplica** automaticamente chamadas `fetch` idênticas em uma única renderização — para que você possa buscar os mesmos dados em um layout e uma página sem uma solicitação duplicada. ## Por que isso importa Busca de dados async direta em Server Components é uma das maiores simplificações do App Router — sem boilerplate, acesso seguro do lado do servidor, deduplicação automática e cache por busca que duplica sua escolha SSG/SSR/ISR. Saber paralelizar buscas independentes (evitando cascatas) é a prática de desempenho chave.