React Server Components (RSC) represent the biggest paradigm shift in frontend development since hooks. By separating rendering tasks into server-only and client-interactive phases, RSCs deliver faster initial page loads and zero bundle-size overhead for static code libraries.
Server vs. Client Components
By default, components in Next.js App Router are Server Components. They render exclusively on the server side, meaning their import dependencies (like markdown parsers or date libraries) are not sent to the user's browser.
If you need interactive features (like useState, useEffect, or event listeners), place the "use client" directive at the top of the file to mark it as a Client Component.
Key Architectural Advantages
- Smaller Bundle Size: Heavy server dependencies are omitted from the client bundle.
- Direct Database Access: Fetch data directly from databases inside Server Components using async/await without building REST APIs.
- Security: Secure backend operations like API keys and queries stay hidden on the server.
Data Fetching & Streaming
With RSC, you can stream content to the client using Suspense blocks. If a slow component is fetching data, Next.js can send the HTML shell first and stream the component as soon as it resolves, preventing the page load from being blocked.
Adopting this architecture requires a shift in thinking, but the performance benefits for modern applications are massive.