React Server Components: When to Use Them (and When Not To)

What Are React Server Components?

React Server Components run exclusively on the server. They never ship their JavaScript to the client, which means zero bundle size impact. They can directly access databases, file systems, and environment variables without an API layer.

When to Use RSCs

Fetching data that doesn't change based on user interaction

Rendering content that doesn't need event listeners

Components that import large libraries (syntax highlighters, markdown parsers, date libraries)

Accessing backend resources like databases or internal APIs directly

When NOT to Use RSCs

Anything with onClick, onChange, or other event handlers

Components that use useState, useEffect, or any other hooks

Components that need access to browser APIs like localStorage or window

Real-time features like live chat or collaborative editing

The Mistake Everyone Makes

Wrapping RSCs in Client Components unnecessarily. If your Client Component renders children that don't need to be interactive, pass them as props from a Server Component instead. This pattern keeps your client bundle small.

Conclusion

RSCs aren't a replacement for Client Components — they're a complement. Default to server, opt into client. Your users' devices will thank you.