Server Components vs Client Components

The introduction of React Server Components (RSC) has fundamentally altered how we architect web applications. For years, the default approach was to ship massive JavaScript bundles to the browser and let the client do the heavy lifting.

RSCs allow us to render complex UI entirely on the server, shipping zero JavaScript to the client for those specific components. This drastically reduces the TTI (Time to Interactive). The new mental model requires developers to draw strict boundaries: use Server Components for data fetching and static UI, and selectively interleave Client Components only where interactivity (like state, hooks, or GSAP animations) is strictly required.