Next.js Server Components

Master Server Components in Next.js to build high-performance applications with server-side rendering and data fetching.

Server Components Basics

In Next.js App Router, all components are Server Components by default:

// app/posts/page.tsx (Server Component by default)
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // Cache for 1 hour
  });
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}