What are the performance implications of React Server Components?
Answer
React Server Components (RSC), introduced in Next.js App Router and other frameworks, fundamentally change performance characteristics. Zero client JavaScript for server components: server components render to HTML on the server and their component code is never sent to the client bundle. A component fetching from a database + rendering a list contributes 0 bytes to the client bundle. Waterfalls eliminated: data fetching happens on the server in the same data center as the database — no network round trips between client and API. Component-level streaming: RSC enables streaming HTML chunks as server components resolve, using Suspense boundaries. Users see content progressively without waiting for all data. Client/Server boundary: the "use client" directive marks components that need interactivity (event handlers, hooks). Everything else stays server-side. Performance trade-offs: Higher server load: more rendering on the server. TTFB: first byte may be slower (server must start rendering before responding). Not a silver bullet: RSC is best for data-heavy components without interactivity. Over-using client components negates the benefits. Measurement: RSC improves TBT and TTI (less hydration JS) — measure both LCP and INP to confirm improvement.
More Web Performance Questions
View all →- Advanced What is the scheduler API and how does it improve INP?
- Advanced What is speculation rules API and prerendering?
- Advanced How do JavaScript virtual machines optimize JavaScript performance?
- Advanced What is the Islands Architecture and partial hydration for performance?
- Advanced What are Container Queries and their performance implications?