Client-Side Rendering

csr · client side rendering · client-side rendering · spa rendering · browser rendering · javascript rendering

Definition

Client-side rendering is an architecture in which the browser receives a JavaScript application and builds the interface itself, fetching data through an API; it is characteristic of single page applications and needs its own strategy for SEO and personalization.

How client-side rendering works

Under client-side rendering the server returns minimal HTML — in practice an empty <div id="root"></div> and a link to the JS bundle. The browser downloads the bundle, executes it, and only then does the application build the DOM, request data through the API and draw the interface.

The typical flow for an e-commerce single page application:
1. The browser receives HTML (roughly 1–5 KB) plus a link to the JS bundle
2. It downloads and parses the bundle (200–500 KB and up)
3. The application initialises and requests data — catalogue, recommendations, profile
4. The API responses arrive and the page renders

The visitor sees content only at step 4, which creates a noticeable delay on the first load, measured as first contentful paint.

CSR in e-commerce: strengths and limits

Aspect	CSR	SSR
First load	Slower (waits for JS)	Faster (HTML is ready)
Navigation between pages	Fast, no reload	Needs a new server request
SEO	Problematic without extra work	Natively compatible
Personalization	Delayed until JS initialises	Available immediately in the HTML
Core Web Vitals (LCP, CLS)	At risk from async loading	Better by default

Personalization and recommendations in a CSR architecture

Recommendation widgets under CSR load after the application initialises — they are not in the original HTML. That means:

Layout shift: the “similar products” block appears 500–1,500 ms after the rest of the content and pushes the page around. The fix is to reserve the space in advance with a skeleton placeholder.
Delayed personalization: for a few seconds the visitor sees a page with no personal content. On a slow connection that is obvious.
Initialisation order: make sure the platform’s SDK initialises at the right point in the component lifecycle rather than blocking the main thread.

Tip: for SEO-important pages such as categories and product cards, consider a hybrid — Next.js or Nuxt with server-side rendering for the first load and client-side rendering for subsequent navigation. It combines the strengths of both.

Common mistakes

Shipping everything in one bundle. Split it into chunks through code splitting — the category page should not be waiting for the basket’s code.

Letting external scripts block rendering. Analytics and personalization tags without async or defer hold up the first paint. Every external script should be asynchronous.

No skeleton states. Empty blocks that fill in a second later create layout shift and read badly to the visitor. Put a placeholder animation where the widget will be.

Frequently asked questions

Why does CSR cause SEO problems in e-commerce?

Under CSR a crawler receives empty HTML and the content only appears once JavaScript has executed. Googlebot can render JS, but it does so in a deferred queue, so a page may be indexed days or weeks late. Other crawlers handle JS rendering less reliably still. For SEO-critical content such as product descriptions and prices, use server-side rendering or static generation.

How does personalization work in a CSR architecture?

Recommendation widgets and personalized content load asynchronously after the page initialises. That creates two risks — visible layout shift as the blocks appear, and a delay before personalization arrives. A partial answer is skeleton placeholders reserving space for the widgets, plus caching of personal data in localStorage.

How does CSR differ from SSR, and which suits e-commerce?

Server-side rendering returns finished HTML — a faster first paint, better SEO, simpler personalization. CSR gives faster navigation between pages once the first load is done. The e-commerce compromise is a hybrid: server-side rendering for SEO pages such as categories and product cards, client-side for interactive areas such as the basket and the account.

How do you integrate a personalization platform into a CSR application?

Through a JavaScript SDK or the API. The platform's snippet initialises once the main application has loaded. The key points are not to block the main render path, and to lazy-load widgets that sit below the fold.