How Server Components work in Next.js
Server Components can run once at build time or on a web server for each request. They can be async functions that await data directly during render. On the server, Next.js renders them into a data format called the React Server Component Payload (RSC Payload), a compact, serialized form of the rendered tree. On later navigations, Next.js prefetches and caches the RSC Payload so routes switch instantly. On first page load, JavaScript hydrates only the Client Components, which makes the page interactive.
The 'use client' directive draws the line between the two. Once a file is marked with it, all of its imports and the components it renders directly go into the client bundle. Props passed from Server Components to Client Components must be serializable. React's Server Components reference describes the model outside any framework, and Next.js vs React covers what the framework adds.
Rules and limits
No interactive APIs. Because Server Components are never sent to the browser, they cannot use interactive APIs such as
useState.No context creation. Server Components cannot create React context, but they can render a context provider imported from a Client Component module.
Composition. A Server Component can be passed as a prop to a Client Component, so server-rendered UI can sit inside client UI.
No directive. There is no directive that marks a Server Component;
"use server"marks Server Functions.Secrets. Next.js recommends Server Components for code that uses API keys, tokens and other secrets, because they stay on the server. Importing a module marked with the
server-onlypackage into a Client Component causes a build-time error.
In App Router Next.js development, these rules decide where each 'use client' boundary goes.
What Pagepro checks when moving to the App Router
Before a Pages Router to App Router migration, Pagepro lists every feature that consumes URLs outside the normal page render: preview and draft-mode URLs, headless screenshot or PDF services, analytics events, sitemaps and webhook callbacks. The router switch changes route and preview-mode URL semantics (see the App Router vs Pages Router comparison), so each one is re-verified after deploy and watched for weeks.
Sources
- Server Components - React ReferenceReact · react.dev
- GlossaryNext.js · nextjs.org
- Getting Started: Server and Client ComponentsNext.js · nextjs.org
- use client - Directives (App Router)Next.js · nextjs.org