Rendering: Server Components | Next.js
React Server Components allow you to write UI that can be rendered and optionally cached on the server. In Next.js, the rendering work is further split by route segments to enable streaming and partial rendering, and there are three different server rendering strategies: This page will go through how Server Components work, when you might use them, and the different server rendering strategies. There are a couple of benefits to doing the rendering work on the server, including: By default, Next.js uses Server Components. This allows you to automatically implement server rendering with no additional configuration, and you can opt into using Client Components when needed, see Client Components. On the server, Next.js uses React's APIs to orchestrate rendering. The rendering work is split into chunks: by individual route segments and Suspense Boundaries . Each chunk is rendered in two steps: Then, on the client: What is the React Server Component Payload (RSC)? The RSC Payload is a compac
This page is also available as Markdown at /docs/app/getting-started/server-and-client-components.md . For an index of Next.js documentation , see /docs/llms.txt . Copy page Server and Client Components Last updated June 23, 2026 By default, layouts and pages are Server Components , which lets you fetch data and render parts of your UI on the server, optionally cache the result, and stream it to the client. When you need interactivity or browser APIs, you can use Client Components to layer in functionality. This page explains how Server and Client Components work in Next.js and when to use the
Explore this link on the map →related reading
- Making Sense of React Server Components • Josh W. Comeaujoshwcomeau.com
- React Foundations: Server and Client Components | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Getting Started: Fetching Data | Next.jsnextjs.org
- Server Components – Reactreact.dev
- Getting Started: Caching | Next.jsnextjs.org
- Cursor Docs — Agent, Rules, MCP, Skills & CLIdocs.cursor.com
- Building Bulletproof React Components - Shu Dingshud.in
- Getting Started: Fetching Data | Next.jsnextjs.org
- Building a single-page application with Next.js and React Routercolinhacks.com
- File-system conventions: loading.js | Next.jsnextjs.org
- We migrated 50,000 lines of code to React Server Componentsmux.com