Skip to main content

Server Components

React Server Components run on the server and send rendered output to the client.

Official docs

Server Components — nextjs.org

Default in App Router​

Components in the App Router are Server Components by default. They can:

  • Fetch data directly on the server
  • Access backend resources securely
  • Reduce client-side JavaScript bundle size

Example​

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