Development
React Server Components
What React Server Components are and why they matter
Definition
React Server Components (RSC) are a React architecture pattern where components execute on the server and stream rendered HTML to the client, reducing the JavaScript bundle sent to the browser. Server Components can directly access databases, file systems, and APIs without exposing credentials to the client. They are the default in Next.js 13+ App Router and represent a fundamental shift in how React applications handle data fetching and rendering.
How it works
Traditional React renders entirely in the browser. The server sends a JavaScript bundle, the browser downloads it, parses it, and then renders the UI. With Server Components, most of the rendering happens on the server. The browser receives ready-to-display HTML plus minimal JavaScript for interactive elements. Pages load faster because there is less JavaScript to download and execute.
Server Components can directly query databases, call internal APIs, and access server-side resources - no API endpoints needed. A dashboard component can fetch data from PostgreSQL directly in its render function. This eliminates entire layers of API boilerplate and data-fetching hooks that traditional React applications require.
The trade-off is that Server Components cannot use browser-only features: no useState, no event handlers, no browser APIs. Interactive elements must be Client Components (marked with "use client"). The mental model is new: you decide for each component whether it needs interactivity. Most components (data display, layout, content) work perfectly as Server Components. Only interactive elements (forms, dropdowns, animations) need to be Client Components.
How 1Raft uses React Server Components
React Server Components are our default for every new Next.js project. This site (1raft.com) is built with them. The pattern cuts initial page load JavaScript by 40-60% compared to fully client-rendered React. We use Server Components for data-heavy pages (listings, detail views, dashboards) and Client Components only where interactivity requires it (forms, animations, search).
Related terms
Related services
Next Step
Need help with React Server Components?
We apply this in production across industries. Tell us what you are building and we will show you how it fits.