Skip to content
intermediatePhase 38 · Web Performance

Client-Side Rendering

Understand CSR tradeoffs: faster interactivity but slower initial load.

30m
0 problems
Topic Progress0%

How CSR Works

How CSR Works

The browser renders the entire application using JavaScript.

CSR Process

1. Browser requests HTML
2. Server returns minimal HTML (empty root div)
3. Browser loads JavaScript bundle
4. JavaScript renders components
5. App becomes interactive

React SPA Setup

// index.html
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

Routing in CSR

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </BrowserRouter>
  );
}

Data Fetching in CSR

function Products() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/products')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <Spinner />;
  
  return <ProductList products={products} />;
}

CSR Advantages

  1. Simple deployment: Just static files
  2. Rich interactions: Full SPA experience
  3. Better caching: Static assets cached easily
  4. Lower server cost: No server rendering needed

CSR Tradeoffs

CSR Tradeoffs

Performance Tradeoffs

Good:

  • Subsequent navigations are fast
  • Rich client-side interactions
  • Better caching of static assets

Bad:

  • Slow initial load
  • Blank screen while loading
  • Large JavaScript bundle

SEO Tradeoffs

Good:

  • Can work with proper setup
  • Dynamic rendering for bots

Bad:

  • Initial HTML is empty
  • JavaScript required for content
  • Meta tags need client-side rendering

User Experience

Good:

  • Smooth page transitions
  • No full page reloads
  • Rich interactions

Bad:

  • Loading spinner on initial load
  • Flash of unstyled content
  • Memory leaks possible

CSR vs SSR Comparison

Aspect CSR SSR
Initial Load Slower Faster
Subsequent Nav Faster Slower
SEO Poor (needs workarounds) Good
Server Cost Lower Higher
Complexity Simpler More Complex
Interactivity Immediate after load After hydration

When to Use CSR

When to Use CSR

Best Use Cases

  1. Applications behind authentication

    • Dashboards
    • Admin panels
    • User settings

  2. Highly interactive applications

    • Image editors
    • Music players
    • Games

  3. Internal tools

    • Not SEO dependent
    • Controlled environment
    • Rich interactions needed

  4. Progressive Web Apps

    • Offline support
    • App-like experience
    • Push notifications

Examples

// Dashboard (CSR is fine)
function Dashboard() {
  return (
    <div>
      <Sidebar />
      <main>
        <Stats />
        <Charts />
        <RecentActivity />
      </main>
    </div>
  );
}

// Image Editor (CSR ideal)
function ImageEditor() {
  const [image, setImage] = useState(null);
  const [filters, setFilters] = useState({});
  
  return (
    <div>
      <Toolbar />
      <Canvas image={image} filters={filters} />
      <FilterPanel onChange={setFilters} />
    </div>
  );
}

Improving CSR Performance

  1. Code splitting: Load only what's needed
  2. Lazy loading: Defer non-critical components
  3. Service workers: Cache assets for offline
  4. Prefetching: Load next page data
  5. Loading states: Show skeletons/spinners

CSR with SEO

If SEO is needed with CSR:

  1. Dynamic rendering: Serve different content to bots
  2. Prerendering: Pre-render pages at build time
  3. SSR for critical pages: Use SSR only for SEO pages
  4. Meta tag management: Use react-helmet or similar

Practice Problems

0/3solved
Build Client-Side Rendering Component

Create a reusable React component implementing Client-Side Rendering. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Client-Side Rendering Testing

Write unit and integration tests for Client-Side Rendering using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Client-Side Rendering Performance

Optimize Client-Side Rendering for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is the main disadvantage of CSR?

Question 1 options

2. When should you use CSR over SSR?

Question 2 options

3. What is the primary purpose of Client-Side Rendering?

Question 3 options

4. What is a common mistake when implementing Client-Side Rendering?

Question 4 options

Flashcards

Question

What is CSR?

Click to reveal answer

Answer

Client-Side Rendering - browser renders the entire application using JavaScript.

Question

What are the tradeoffs of CSR?

Click to reveal answer

Answer

Fast interactions but slow initial load, poor SEO, and JavaScript dependency.

Question

When should you use CSR?

Click to reveal answer

Answer

For authenticated apps, dashboards, and highly interactive applications.

Question

How do you handle SEO with CSR?

Click to reveal answer

Answer

Dynamic rendering for bots, prerendering, or SSR for critical pages.

Question

What is Client-Side Rendering?

Click to reveal answer

Answer

Client-Side Rendering is a key concept in frontend development.

Revision Notes

Key Takeaways

  • 1.CSR renders everything in the browser with JavaScript
  • 2.CSR has slow initial load but fast subsequent navigation
  • 3.CSR is ideal for authenticated apps and dashboards
  • 4.SEO requires workarounds with CSR
  • 5.Improve CSR with code splitting and lazy loading

Interview Tips

  • •Explain how CSR works and its tradeoffs
  • •Discuss when CSR is the right choice
  • •Know how to improve CSR performance

Cheat Sheet

CSR Cheat Sheet

How CSR Works

  1. Browser loads empty HTML
  2. JavaScript renders app
  3. App becomes interactive

Pros

  • Simple deployment
  • Rich interactions
  • Better caching
  • Lower server cost

Cons

  • Slow initial load
  • Poor SEO
  • JavaScript required

Best For

  • Dashboards
  • Admin panels
  • Internal tools
  • PWAs