CSR (Client-Side Rendering)

This page renders content in the browser after the initial page load.

Client-Side Data

🌐 How CSR Works

  • • Initial HTML loads quickly with minimal content
  • • JavaScript executes in the browser
  • • Data is fetched after page load using fetch/axios
  • • Content updates dynamically without page refresh
  • • Great for interactive features and user-specific data

Code Example

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

  useEffect(() => {
    // Fetch data on component mount
    fetch('/api/csr-data')
      .then(res => res.json())
      .then(data => {
        setData(data)
        setLoading(false)
      })
  }, [])

  if (loading) return <div>Loading...</div>
  
  return <div>{/* Render data */}</div>
}

Use Cases

  • ✓Interactive Dashboards: Real-time charts and data visualization
  • ✓User Interactions: Forms, filters, search with instant feedback
  • ✓Dynamic Content: Content that updates based on user actions
  • ✓Private Data: Content that shouldn't be in initial HTML

Trade-offs

✅ Advantages

  • • Highly interactive
  • • No server rendering needed
  • • Fast subsequent updates
  • • Great for SPAs

⚠️ Considerations

  • • Poor initial SEO
  • • Blank page during load
  • • Requires JavaScript
  • • Larger bundle sizes

Click "Refresh Data" to fetch new data without reloading the page!