What is the difference between Client side rendering and Server side rendering?

HTML JavaScript ImportantMicrosoft

CSR VS SSR

Imagine you're visiting a restaurant. There are two ways your meal might be prepared:

  • The chef prepares your entire dish in the kitchen before serving it to you (Server-Side Rendering)
  • The chef brings you ingredients and equipment, and you assemble the final dish at your table (Client-Side Rendering)

This analogy captures the fundamental difference between Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in web development. Let me explain how these approaches work, their respective advantages and disadvantages, and when you might choose one over the other.

The Rendering Process: What Actually Happens

Client-Side Rendering (CSR)

With client-side rendering, the server sends a minimal HTML document to the browser, often just an empty shell with links to JavaScript files. Then:

  • The browser downloads this minimal HTML document
  • It encounters JavaScript file references and downloads them
  • The JavaScript executes in the browser (the "client")
  • The JavaScript code:
    • Requests data from APIs or services
    • Generates HTML dynamically
    • Injects this HTML into the DOM
    • Handles user interactions and updates the page without full reloads

This approach is the foundation of Single Page Applications (SPAs) built with frameworks like React, Vue, or Angular when used in their default configuration.

Given below is a snippet of code that shows how to implement CSR in a React application

// App.js
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Data fetching happens in the browser
    fetch('https://api.example.com/posts')
      .then(response => response.json())
      .then(data => {
        setPosts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Server-Side Rendering (SSR)

With server-side rendering, the web server prepares the complete HTML document before sending it to the browser:

  • The server receives a request for a page
  • Server-side code (like PHP, Ruby, Node.js, etc.) runs and:
    • Fetches necessary data from databases or APIs
    • Processes the data
    • Injects the data into HTML templates
  • The server sends the fully formed HTML document to the browser
  • The browser renders this ready-to-display HTML

Traditional websites built with PHP, Ruby on Rails, or Django typically use this approach, but modern frameworks like Next.js, Nuxt.js, and Remix bring SSR to React and Vue applications.

Given below is a snippet of code that shows how to implement SSR in a React application using Next.js

// pages/index.jsx
import React from 'react';

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
}

// Data fetching happens on the server before rendering
export async function getServerSideProps() {
  const response = await fetch('https://api.example.com/posts');
  const posts = await response.json();
  
  return {
    props: {
      posts
    }
  };
}
00:00

Table of Contents