Client-SideCSR

Client-Side Rendering

This page fetches data in the browser using React hooks. The data is loaded after the page renders, and you can refetch on demand.

Status:Loading...

How CSR Works

1

Initial Render

Page loads with empty/loading state

2

Fetch Data

JavaScript runs in browser to fetch data

3

Update UI

React updates the page with fetched data

Loading users...

Code Example

"use client";

import { useState, useEffect } from "react";

export default function CSRPage() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // This runs in the browser after page loads
    fetch("https://api.example.com/users")
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []); // Empty deps = runs once on mount

  if (loading) return <div>Loading...</div>;
  
  return <UserList users={users} />;
}

CSR vs SSR vs SSG

CSRClient-Side Rendering

Data fetched in browser • Shows loading state • Good for user interactions, filters, real-time updates

SSRServer-Side Rendering

Data fetched on server • HTML sent with data • Good for SEO, initial page load

SSGStatic Site Generation

Pre-rendered at build • Fastest load • Good for blogs, docs, static content