Fetching Data in Server Components

Async Server Components

Server Components can be async functions, letting you await data directly in JSX without useEffect or useState boilerplate.

// app/posts/page.tsx
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Next.js extends the native fetch with caching options: force-cache, no-store, and revalidate.