Skip to main content
Interface Atlas
Guide

Server Components

UI components that execute exclusively on the server, sending pre-rendered markup to the client without adding to the JavaScript bundle.

Published

Contents

Definition

UI components that execute exclusively on the server, sending pre-rendered markup to the client without adding to the JavaScript bundle.

Server Components (most notably React Server Components) are a paradigm where specific UI components are guaranteed to only ever execute on the server. They do not ship any of their own JavaScript to the browser. They can access databases and backend APIs directly, and they pass serialized data or HTML down to standard Client Components.

Why It Matters

Historically, if a component required a large library (like a markdown parser or a date formatter), that entire library had to be shipped to the user’s browser. Server Components allow you to run that heavy library on the server, sending only the resulting HTML string over the wire. This drastically reduces client-side bundle sizes.

Server Components vs. Server-Side Rendering (SSR)

  • SSR: The server renders the initial HTML for a component, but the component’s code is still sent to the browser so it can be hydrated and manage its own state.
  • Server Components: The server renders the component into a special serialized format. The component’s code is never sent to the browser. The component cannot use client-side state (like useState) or browser APIs (like window).