Suggest an editImprove this articleRefine the answer for “Why are Client Components more expensive?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Client Components** are considered more expensive because they shift more work onto the user's browser: they increase the JS bundle, require hydration, and load the main thread. **Key point:** unlike Server Components, they cache worse and worsen key metrics such as LCP, INP, and TTI.Shown above the full answer for quick recall.Answer (EN)ImageClient Components are considered "more expensive" because they **shift more work onto the user's browser** and increase the amount of JavaScript that needs to be loaded, executed, and maintained. Let's break down exactly what this "expense" consists of. --- ## 1. Client Components increase the JS bundle size Any Client Component: - ends up in the client-side JavaScript - requires the React runtime in the browser - pulls in its dependencies Even if a component is visually simple, it: - increases the bundle size - affects loading speed The more Client Components there are, the heavier the page. --- ## 2. They require hydration Client Components must be: 1. loaded 2. executed 3. "brought to life" (hydration) During hydration: - React matches the HTML and JS - attaches event handlers - restores state This: - loads the CPU - blocks the main thread - slows down interactivity Server Components just deliver HTML and are done. --- ## 3. All the logic runs in the browser Client Components live in the user's environment: - computations - effects - event handlers - state On weak devices, this: - slows down the interface - increases delays on clicks - worsens INP --- ## 4. They complicate the data flow Client Components: - cannot access server resources directly - require API requests - often trigger additional fetches This leads to: - more network requests - loading states - extra renders --- ## 5. They worsen caching Server Components: - cache well - are easily reused - do not depend on client state Client Components: - often depend on state - are harder to cache - are less suited for static content This reduces the effectiveness of optimizations. --- ## 6. They affect all the key metrics A large number of Client Components worsens: - LCP, due to heavy JS - INP, due to blocking - TTI, due to long hydration Even if the page looks visually simple. --- ## Summary Client Components are "more expensive" because they: - increase JavaScript - require hydration - load the browser - worsen interactivity - are harder to cacheFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.