Server Components are the biggest shift in React's architecture in years. Here is everything you need to know.
React Server Components (RSC) represent the most significant architectural shift in React since hooks were introduced. If you have not gotten your head around them yet, now is the time.
The core idea is simple: some components render on the server only, and some render on the client. Server components have direct access to the database, filesystem, and backend services. They send rendered HTML to the client — no JavaScript bundle required.
This has profound performance implications. Your initial page load contains fully rendered content without a JavaScript waterfall. Time to first contentful paint drops dramatically. Users on slow connections see content much faster.
Client components work exactly as React components always have. They handle interactivity, state, and browser APIs. You mark them explicitly with the "use client" directive. Everything else defaults to server.
The key mental model shift: think about where your data lives. If a component fetches from a database or calls a private API, make it a server component. If it needs to respond to user input or use browser APIs, make it a client component.
Next.js 15 makes RSC the default and provides excellent tooling around them. The App Router is built entirely around this model. If you are starting a new project today, you should be using the App Router.
One common pitfall: you cannot pass functions from server to client components as props. You can pass plain data — strings, numbers, objects, arrays. For interactivity, lift client-side logic into dedicated client components and compose them within your server component tree.
David Park
Expert educator at Neo Nexor