What performance problems does CSR have?

CSR (Client-Side Rendering) offloads almost all the work onto the user's browser. This is convenient for development, but from a performance standpoint this approach has a number of systemic problems.

Let's go through the main ones.

---

#1. An empty screen on the first load

With CSR the server usually serves an almost empty HTML and a large JavaScript bundle.

What happens:

1. JS loads
2. JS executes
3. Data loads
4. Only then does the content appear

The user sees emptiness or a spinner for a long time.

This directly hurts:

• FCP
• LCP
• the first impression of the site

---

#2. A large JavaScript bundle

With CSR, often:

• the whole application's code loads at once
• even the code for screens that aren't used
• a lot of third-party libraries

Consequences:

• a long JS download
• a long JS parse and execute
• load on weak devices

Especially painful on mobile.

---

#3. Blocking the browser's main thread

JavaScript runs on the main thread.

With CSR:

• app initialization
• component rendering
• computations and effects

all of this can block the interface.

Result:

• buttons don't respond to clicks
• scrolling lags
• the interface is "frozen"

---

#4. A slow first render of the data

Data in CSR is usually:

• requested after JS loads
• received asynchronously
• causes repeated renders

Because of this:

• content "flickers"
• there are many loading states
• extra re-renders happen

The user sees the loading process, not the result.

---

#5. SEO problems

Search bots:

• handle heavy JS worse
• may not wait for data to load
• spend more resources per page

As a result:

• indexing is slower
• part of the content may be skipped
• rankings are lower than pages with ready HTML

---

#6. Dependence on the device and the network

CSR heavily depends on:

• CPU power
• amount of memory
• internet quality

What is fast on a MacBook:

• can lag on a budget Android device

Performance becomes unpredictable.

---

#7. Difficulty of optimization

For CSR to run fast, you have to manually:

• set up code splitting
• optimize data loading
• fight extra renders
• keep an eye on bundle size

Without this, the app quickly degrades in speed.

---

#Summary

The main performance problems of CSR:

• a long empty screen at startup
• heavy JavaScript
• UI blocking
• slow data loading
• weak predictability across different devices
• SEO difficulties

That's exactly why modern frameworks try to reduce the share of CSR or combine it with server rendering, so the user sees content as early as possible.