InBuild
GuidesApril 16, 20266 min read

React Server Components Explained: What They Are and Why They Matter

React Server Components run on the server, send zero JavaScript to the browser, and are the default in Next.js App Router. Here's what that means for your app.

React Server Components (RSC) are the biggest architectural shift in React since hooks. They run on the server, send HTML (not JavaScript) to the browser, and are the default in Next.js App Router. Here's what you need to know.

What they are

A Server Component is a React component that executes on the server during rendering. It can directly access databases, file systems, and APIs without an API layer. The output is HTML sent to the browser — no component JavaScript is bundled or shipped to the client.

Why they matter

  • Less JavaScript shipped. A page with 50 Server Components sends zero JavaScript for those components. Only Client Components (marked with 'use client') ship JS.
  • Direct data access. Fetch from your database in the component itself. No useEffect, no loading states for the initial render, no API route indirection.
  • Better SEO. Content renders on the server and arrives as HTML. Search engines see the full page without executing JavaScript.

The mental model

Think of your page as a tree. Most nodes are Server Components (data fetching, layout, static content). A few nodes are Client Components (interactive elements — forms, modals, toggles). The boundary between them is the 'use client' directive.

In Next.js App Router

Every component in the app/ directory is a Server Component by default. To make a component interactive, add 'use client' at the top of the file. Keep the client boundary as low in the tree as possible — only the interactive parts need client JavaScript.

What this means for AI-generated apps

AI app builders that target Next.js (InBuild, v0) generate Server Components by default. This means the generated pages are fast, SEO-friendly, and ship minimal JavaScript. Interactive elements (forms, accordions, modals) are automatically marked as Client Components. The architecture is correct out of the box.

Frequently asked questions

Do Server Components replace Client Components?

No. Server Components handle data fetching and static content. Client Components handle interactivity (onClick, useState, useEffect). Most pages are a mix of both. The default in Next.js App Router is Server Component — add 'use client' when you need browser APIs.

Can I use useState in a Server Component?

No. Server Components run on the server only and can't use browser-side hooks (useState, useEffect, useRef). If you need state, mark the component with 'use client'. The rest of the page stays on the server.

Ready to build?

Turn your next idea into a production-ready app in minutes.

Keep reading

Guides

Google Search Console for Developers: Setup, Sitemap, and Monitoring

GSC is your direct line to Google. Here's how to set it up, submit your sitemap, request indexing, and monitor your site's search performance.

Guides

How to Design a Hero Section That Converts (With Examples)

The hero section gets 5 seconds. Here's how to use them: headline structure, CTA placement, social proof positioning, and the 2026 design patterns that work.

Guides

How to Choose an AI Coding Tool: A Practical Decision Framework

The AI coding tool space is crowded. Here's a practical framework for picking the right tool based on your stack, workflow, and who will maintain the output.