The Core Concept
Every React component is either a Server Component or a Client Component. Server Components render on the server, never run in the browser, can be async, can access databases and file systems directly, and add zero bytes to your JavaScript bundle. Client Components are what you already know — they run in the browser, handle state and events, and use hooks.
The default in Next.js App Router is Server Component. You opt into client behaviour by adding 'use client' at the top of a file. This is a reversal of the previous default — previously, everything was client unless you explicitly opted into server rendering (getServerSideProps, getStaticProps).
What This Changes in Practice
Data fetching moves to the component that needs the data. Instead of fetching at the page level and passing data down through props, each Server Component fetches exactly what it needs with a direct database call or API fetch. The data is never sent to the client. Only the rendered HTML output crosses the wire.
The practical benefit compounds in large component trees. In a dashboard with fifteen different data sources, each component fetches its own data in parallel. No waterfall. No prop drilling. No global state management for server data. The architecture gets simpler as the data complexity increases.
Key takeaways
- Server Components add zero bytes to the client bundle — use them for all components that don't need interactivity, and push 'use client' as far down the tree as possible
- Server Components can be async — fetch data directly in the component with await, eliminating the need for useEffect or getServerSideProps patterns
- You cannot use useState, useEffect, or event handlers in Server Components — these are the signal that a component needs to be a Client Component
Conclusion
React Server Components represent a genuine paradigm shift in how we think about rendering and data flow. The learning curve is real but the result — simpler data fetching, smaller bundles, faster pages — is worth the investment in understanding them properly.
Enjoyed this article?
Vivek Kumar Singh
Technical Expert · Full Stack Cloud Engineer · Tokyo, Japan
