React Server Components (RSC) represent one of the biggest shifts in the React ecosystem since Hooks. By moving logic to the server, we can reduce bundle sizes and improve data fetching efficiency.
What are Server Components?
Traditionally, React components rendered on the user's device (Client Components). Server Components, however, render entirely on the server and send a serialized format to the client. This means:
- Zero Bundle Size: Libraries used only on the server don't get sent to the client.
- Direct Database Access: You can query your DB directly inside your component.
Note: Server Components cannot use hooks like useState or useEffect
because they don't run in the browser.
The "Fast Approach" with Composition
Mixing Server and Client components allows for the "Fast Approach." You render the heavy skeleton and data on the server, and hydrate only the interactive "islands" on the client.
Example Pattern
// Server Component
async function BlogIndex() {
const posts = await db.posts.findMany();
return (
<div>
{posts.map((post) => (
// Client Component for interactivity
<LikeButton key={post.id} initialLikes={post.likes} />
))}
</div>
);
}
This hybrid model ensures the initial page load is lightning fast (Server) while maintaining the rich interactivity users expect (Client).
Conclusion
Leveraging RSCs is essential for building "Advanced" applications. It reduces the JavaScript sent to the browser, improving Core Web Vitals and, subsequently, your SEO ranking.