DEV Community

Cover image for Rendering Techniques in Modern Web Apps
Kiran
Kiran

Posted on

Rendering Techniques in Modern Web Apps

#frontend #interview #performance #webdev

🚀 Rendering Techniques in Modern Web Apps — The Complete Interview Guide

One of the most frequently asked frontend interview topics:

How is the page rendered?

Many developers know the terms:

CSR, SSR, SSG...

But struggle to explain when and why to use each one.

🧠 What is Rendering?

Rendering = Converting your code into HTML that users can see in the browser.

Different rendering strategies optimize for:

⚡ Performance
🔍 SEO
💰 Infrastructure cost
👨‍💻 Developer experience

1️⃣ CSR (Client-Side Rendering)

Browser receives minimal HTML:

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode

Then:

Download JS
↓
Execute JS
↓
Build UI
↓
Render page
Enter fullscreen mode Exit fullscreen mode

✅ Advantages

✔ Rich interactivity
✔ Good for dashboards/admin panels
✔ Reduced server workload

❌ Disadvantages

❌ Slower initial load
❌ Poor SEO (historically)
❌ Large JS bundles

Examples

  • React SPA
  • Admin dashboards
  • Internal tools

2️⃣ SSR (Server-Side Rendering)

Server generates HTML before sending it.

Request
↓
Server renders HTML
↓
Browser displays page
↓
Hydration
Enter fullscreen mode Exit fullscreen mode

✅ Advantages

✔ Faster first paint
✔ Better SEO
✔ Better perceived performance

❌ Disadvantages

❌ More server work
❌ Hydration cost
❌ More complex architecture

Examples

  • E-commerce
  • Marketing sites
  • News websites

3️⃣ SSG (Static Site Generation)

Pages generated at build time.

Build Time
↓
Generate HTML
↓
Serve static files
Enter fullscreen mode Exit fullscreen mode

✅ Advantages

✔ Extremely fast
✔ CDN friendly
✔ Excellent SEO

❌ Disadvantages

❌ Content not instantly updated
❌ Rebuild needed

Examples

  • Blogs
  • Documentation
  • Landing pages

4️⃣ ISR (Incremental Static Regeneration)

Popularized by Next.js

Combines SSR + SSG.

Serve static page
↓
Regenerate in background
↓
Update cache
Enter fullscreen mode Exit fullscreen mode

Advantages

✔ Fast like SSG
✔ Fresh like SSR

Examples

  • Product catalogs
  • Content-heavy sites

5️⃣ Streaming SSR

Instead of waiting for the entire page:

Header
↓
Content
↓
Comments
Enter fullscreen mode Exit fullscreen mode

Sent progressively.

Advantages

✔ Faster perceived load
✔ Better UX

6️⃣ React Server Components (RSC)

Part of modern React.

Components execute on the server.

Server Component
↓
Fetch data
↓
Send result
Enter fullscreen mode Exit fullscreen mode

Less JavaScript shipped to browser.

Advantages

✔ Smaller bundles
✔ Better performance
✔ Faster initial load

📊 Quick Comparison

Technique SEO Initial Load Interactivity
CSR Medium Slow Excellent
SSR Excellent Fast Excellent
SSG Excellent Very Fast Excellent
ISR Excellent Very Fast Excellent
RSC Excellent Very Fast Excellent

🚨 Interview Traps

❌ SSR = Faster everything

✔ SSR improves initial rendering, but hydration still costs time.

❌ CSR is always bad for SEO

✔ Modern search engines can render JS, but SSR/SSG are generally safer.

❌ SSG works for every website

✔ Not ideal for rapidly changing data.

💡 Senior-Level Insight

Modern applications rarely use a single strategy.

Typical production setup:

Marketing Pages → SSG
Product Pages → ISR
Dashboard → CSR
Critical Content → SSR
Heavy Data Components → RSC
Enter fullscreen mode Exit fullscreen mode

👉 The best rendering strategy is usually a combination of techniques.

🎯 Interview One-Liner

Rendering techniques determine where and when HTML is generated. Common approaches include CSR, SSR, SSG, ISR, and React Server Components, each balancing performance, SEO, scalability, and user experience differently.

ReactJS #NextJS #Frontend #WebPerformance #SSR #CSR #SoftwareEngineering #InterviewPrep #EngineeringMindset

Top comments (0)