How does data fetching work in the App Router?

Summary

Server Components can be async and fetch data directly with fetch or any database/ORM client. Next.js adds caching and revalidation options on top: fetch(url, { next: { revalidate: 60, tags: ['posts'] } }), segment-level export const revalidate, and (in newer versions) the 'use cache' directive.

Longer Answer

Fetch data where it's needed: identical fetch calls during one render are deduplicated (request memoization), and you can wrap non-fetch data functions in React's cache() for the same effect. Avoid waterfalls by starting independent requests in parallel (Promise.all) and streaming slower parts behind <Suspense>. Client-side fetching (SWR, TanStack Query) is still useful for highly interactive or user-specific live data.

Code Example

export default async function Dashboard() {
  const [user, stats] = await Promise.all([
    getUser(),                                                        // React cache()-wrapped DB call
    fetch("https://api.example.com/stats", { next: { revalidate: 60, tags: ["stats"] } }).then((r) => r.json()),
  ]);
  return <Overview user={user} stats={stats} />;
}

Key Points

• Async Server Components fetch directly
• Request memoization dedupes identical fetches
• revalidate and tags control freshness
• Parallelize with Promise.all; stream with Suspense