Data Fetching (App Router)

Priority: P0 (CRITICAL)

Fetch data directly in Server Components using async/await.

Fetch API Extensions

Next.js extends the native fetch API for granular caching control.

• Static (Default): fetch('https://api.com') -> cache: 'force-cache'. Built at build time.
• Dynamic: fetch('...', { cache: 'no-store' }). Fetched on every request.
• Revalidated (ISR): fetch('...', { next: { revalidate: 60 } }). Cached for 60s.

Patterns

• Colocation: Fetch data where it's used. Next.js automatically deduplicates requests for the same URL in the same render pass.
• Parallel: Use Promise.all() to prevent waterfalls.