Understanding React Server Components

React Server Components (RSC) allow you to render components on the server, reducing the amount of JavaScript sent to the client. This architectural shift addresses the long-standing tension between rich interactivity and fast initial load times.

Benefits of RSC

• Zero Bundle Size: Server components are not included in the client bundle. Heavy dependencies like markdown parsers or date formatting libraries stay on the server.
• Direct Backend Access: You can access your database, internal APIs, or file system directly from your components without needing a separate API layer.
• Automatic Code Splitting: Client components imported by server components are automatically code-split, meaning users only download the JS they actually need.

When to use Client Components?

Use Client Components (marked with "use client") when you need interactivity. This includes event listeners (onClick, onChange), state and lifecycle hooks (useState, useEffect), or browser-only APIs (window, document).

The Interleaving Pattern

The true power of RSC lies in composing them with Client Components. You can pass Server Components as children to Client Components, allowing you to wrap interactive boundaries around server-rendered content.