What is Rendering ?

Think of it as a painting being painted on an empty canvas . The website content being the painting and the browser screen being the canvas .

But who is the “Painter“ ? - Now , that is the question we are about to find the answer to.

Some websites hand over the brush to your browser, letting it create the page on the fly. Others paint the page before you even see it and deliver the finished masterpiece to your screen.

These two approaches are called:

• Client-Side Rendering (CSR)

• Server-Side Rendering (SSR)

In this guide, we’ll break down how each works, how to detect them easily using just “View Page Source” in the browser, and why this distinction matters in the real world.

Client-Side Rendering (CSR)

🔹 Basic Idea:

• The HTML sent from the server is mostly empty or minimal.

• A JavaScript bundle is sent to the browser.

• The browser executes the JavaScript, builds the DOM, and renders the content.

🔹 Flow:

🔹 Examples:

• React + Vite or Create React App

• Single Page Applications (SPA)

How to Detect CSR (Using View Page Source):

1. Right-click anywhere on the page → click View Page Source

2. Look for:

   • An empty container like <div id="app"></div> or <div id="root"></div>

   • No visible product descriptions, text, or images

   • Heavy reliance on JavaScript files (main.js, bundle.js)

✅ If all the meaningful content is missing from the HTML and only appears after loading the page — it’s Client-Side Rendering.

---

🎬 Real Example: Netflix

• Viewing Netflix’s page source (before login), you’ll see:

    <div id="app"></div>
    <script src="/bundle.js"></script>
  

• No visible movies, titles, or layout structure in the source.

🔍 Conclusion: Netflix paints the screen in the browser. ✅ CSR.

Server-Side Rendering (SSR)

🔹 Basic Idea:

• The HTML is rendered on the server and sent to the client.

• The browser displays the full content immediately.

• JS enhances interactivity later (hydration).

🔹 Flow:

🔹 Examples:

• Next.js (React framework)

• Laravel Blade templates (PHP)

• Express.js with EJS or Pug templates

How to Detect SSR (Using View Page Source):

1. Right-click → View Page Source

2. Look for:

   • Structured HTML with readable content like titles, prices, and images

   • HTML rendered directly with no heavy dependency on JavaScript for display

✅ If content is already present in the raw HTML — it’s Server-Side Rendering.

---

🛒 Real Example: Amazon

• Viewing a product page's source (e.g., Samsung Galaxy S23), you’ll see:

    <div id="dp">
      <div class="product-title">Samsung Galaxy S23</div>
      <div class="price">₹74,999</div>
    </div>
  

• Full content is already rendered before any JavaScript runs.

🔍 Conclusion: Amazon hands a ready-made painting to the browser. ✅ SSR.

---

Advanced Concepts

1. Hydration

• In SSR, after HTML is delivered and shown, JavaScript is used to “hydrate” the HTML — i.e., make it interactive.

• Happens in frameworks like Next.js, Nuxt, etc.

2. Partial Hydration

• Only parts of the page are hydrated to save resources.

• Used in Qwik, Astro, etc.

3. Streaming SSR

• Instead of waiting for the full page to render, server streams parts of the page as they become ready.

• Improves time-to-first-byte.

• Supported in React 18 (with Suspense) and frameworks like Next.js.

4. ISR (Incremental Static Regeneration) – Hybrid

• Used in Next.js.

• Static pages are generated and then revalidated on demand.

• Combines benefits of SSR and static site generation (SSG).

---

Conclusion

In the battle between CSR and SSR, there’s no single winner — only better choices based on goals.

Whether your website is content-rich or interaction-heavy, knowing who holds the paintbrush — the browser or the server — can guide smarter design, faster load times, and better SEO.

---

Bonus : Websites and Their Rendering Strategies