Why are Client Components more expensive?

Client 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 cache