Next.js App Router Data Fetching

Pattern 1: Async Server Components (Recommended)

// app/posts/page.tsx (Server Component)
export default async function PostsPage() {
  // Fetch directly in Server Component
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // Revalidate every 60 seconds
  }).then(res => res.json());