Client-Side Rendering (CSR)

This page demonstrates client-side rendering in Next.js. Notice the 'use client' directive at the top of the file, which marks this component as client-side rendered.

Live Example

Below is a live clock that updates every second. This is only possible with client-side rendering because it requires JavaScript to run in the browser:

Loading...

API Response

This data was fetched client-side with a 4-second delay:

Key Characteristics

  • Initial page load may show a loading state
  • Interactive features work immediately
  • Requires JavaScript to be enabled
  • Good for highly interactive components
  • Updates can happen without page refresh

When to Use CSR

Client-side rendering is ideal for:

  • Private, authenticated pages
  • Real-time data updates
  • Interactive dashboards
  • User-specific content