Client-Side Rendering (CSR)

Pages are rendered on the client-side after JavaScript loads. Ideal for SPAs, Games, and Dashboards where interactivity is key.

Server

🌐
Request
Response
🖥️
Server sends HTML/CSS/JS

Client

Client loads HTML/CSS/JS
React.mount()
render()
componentDidMount() / useEffect()
JavaScript fetches data
Dynamic content rendered on client
✨Render UI
Benefits x Trade-offs

Benefits

  • •Rich Interactivity: Full client-side interactivity
  • •Reduced Server Load: Minimal server processing
  • •Dynamic Updates: Real-time content updates

Trade-offs

  • •Poor initial SEO: Search engines see empty HTML
  • •Slow Time to First Byte (TTFB): Content loads after JavaScript
  • •High client CPU usage: All rendering on client
  • •No content without JavaScript: Breaks if JS is disabled
How to implement?

CSR uses client-side components with React hooks for interactivity.

"use client";

import { useState, useEffect } from "react";

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data?.message}</div>;
}
  • •Use 'use client' directive at the top of the file
  • •Components can use React hooks (useState, useEffect, etc.)
  • •Data fetching happens on the client side
  • •Perfect for interactive features and dynamic updates