CSR Demo - Client Side Rendering

Data loaded after component mount (useEffect)

← Back

📊 Performance Information

...
Client fetch time (~3s API)
Fast
Fast interaction after load
Poor
Poor SEO Score

💡 Note: Users see a blank page/loading for 3 seconds until API returns data. Then interaction is very smooth!

🔍 CSR Characteristics

✅ Advantages:

  • • Fast interaction after loading
  • • Reduces server load
  • • SPA-like experience
  • • Suitable for interactive apps

❌ Disadvantages:

  • • Poor SEO (data loads later)
  • • Blank page during loading
  • • Depends on JavaScript
  • • Larger bundle size

📄 Blog List (CSR)

Loading data from client side...

⏱️ Expected load time: ~3 seconds

💻 Code Example

'use client'; // CSR directive

import { useState, useEffect } from 'react';

export default function CSRDemo() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch data after component mounts
    fetchData()
      .then(setData)
      .finally(() => setLoading(false));
  }, []);

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}