React Server Components (RSC) represent a major shift in how we build React applications. By allowing components to render exclusively on the server, we can reduce the amount of JavaScript sent to the client, resulting in faster page loads and better performance.
What are Server Components?
Server Components are a new type of React component that renders on the server and sends HTML to the client. Unlike traditional Server-Side Rendering (SSR), which hydrates the entire application on the client, Server Components do not need to be hydrated. This means they add zero bundle size to your application.
Benefits of Server Components
- Zero Bundle Size: Dependencies used in Server Components are not included in the client bundle.
- Direct Backend Access: You can access your database or file system directly from your components.
- Automatic Code Splitting: Client components imported by Server Components are automatically code-split.
When to use Client Components?
While Server Components are great for data fetching and static content, you still need Client Components for interactivity. Use Client Components when you need:
- Event listeners (onClick, onChange, etc.)
- State and Lifecycle effects (useState, useEffect)
- Browser-only APIs