Next.js Data Fetching

Data Fetching (App Router)

Priority: P0 (CRITICAL)

Fetch data directly in Server Components using async/await.

Strategies

• Static: Build-time. fetch(url, { cache: 'force-cache' }).
• Dynamic: Request-time. fetch(url, { cache: 'no-store' }) or cookies().
• Revalidated: fetch(url, { next: { revalidate: 60 } }).

Patterns

• Direct Access: Call DB/Service layer directly. Do not fetch your own /api routes.
• Colocation: Fetch exactly where data is needed.
• Parallel: Use Promise.all() to prevent waterfalls.
• Client-Side: Use SWR/React Query for live/per-user data (no SEO).

Revalidation

• Path: revalidatePath('/path') - Purge cache for a route.
• Tag: revalidateTag('key') - Purge by tag.

Anti-Patterns

• No Root Awaits: Avoid blocking the entire page. Use <Suspense>.
• No useEffect: Avoid manual fetching in client effects.
• Internal API: Never call /api/... from Server Components.

Examples & References

• Usage Examples
• Caching Documentation