SSR vs CSR mental model in Vue - Performance Comparison

Performance: SSR vs CSR mental model

HIGH IMPACT

This concept affects how fast the main content appears and how quickly users can interact with the page.

Rendering initial page content quickly for better user experience

Vue

import { createSSRApp } from 'vue';
const app = createSSRApp(App);
// Server sends fully rendered HTML
app.mount('#app'); // Hydrates on client

Content is visible immediately from server HTML, improving perceived load speed.

📈 Performance GainLCP improves significantly; content appears before JS hydration.

Rendering initial page content quickly for better user experience

Vue

const app = createApp(App);
app.mount('#app'); // Pure CSR: no server HTML

Page shows blank until JavaScript loads and runs, delaying content visibility.

📉 Performance CostBlocks LCP until JS is downloaded and executed, causing slower perceived load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Pure CSR	Many DOM nodes created after JS runs	Multiple reflows during JS execution	High paint cost due to delayed content	[X] Bad
SSR with Hydration	DOM nodes sent from server, hydrated on client	Single reflow on initial paint	Lower paint cost, faster content visibility	[OK] Good

Rendering Pipeline

SSR sends fully rendered HTML from the server, so the browser can paint content immediately. Then client JS hydrates to add interactivity. CSR sends minimal HTML and relies on JS to build the page, delaying paint until JS runs.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→JavaScript Execution

⚠️ BottleneckJavaScript Execution during hydration or initial render

Core Web Vital Affected

LCP, INP

This concept affects how fast the main content appears and how quickly users can interact with the page.

Optimization Tips

1Use SSR to improve Largest Contentful Paint by sending ready HTML.

2Hydration in SSR can delay Interaction to Next Paint; optimize JS size.

3CSR delays content but can improve interactivity with code splitting.

Performance Quiz - 3 Questions

Which rendering method shows content fastest to the user?

A Server-side rendering (SSR)

B Client-side rendering (CSR)

C Static site generation (SSG)

D None of the above

DevTools: Performance

How to check: Record page load and look for 'First Contentful Paint' and 'Time to Interactive' markers; check JS execution blocking time.

What to look for: Shorter time to first paint indicates good SSR; shorter JS blocking time indicates good hydration or CSR optimization.