Client-side Rendering

Overview

Client-side rendering (CSR) executes the rendering process in the browser using JavaScript. This approach is ideal for highly interactive applications where real-time updates are important.

Implementation

1. 1

   Basic Setup

   Create a client-side rendered component:

   import { useState, useEffect } from 'react'
   
   function UserProfile({ userId }) {
     const [user, setUser] = useState(null)
     const [loading, setLoading] = useState(true)
   
     useEffect(() => {
       async function fetchUser() {
         const response = await fetch(`/api/users/${userId}`)
         const data = await response.json()
         setUser(data)
         setLoading(false)
       }
   
       fetchUser()
     }, [userId])
   
     if (loading) return <div>Loading...</div>
     return <div>{user.name}</div>
   }

2. 2

   Error Handling

   Implement error states:

   function UserProfile({ userId }) {
     const [error, setError] = useState(null)
   
     useEffect(() => {
       async function fetchUser() {
         try {
           const data = await fetchUserData(userId)
           setUser(data)
         } catch (err) {
           setError(err.message)
         }
       }
     }, [userId])
   
     if (error) return <div>Error: {error}</div>
   }

Features and Benefits

CSR is the best fit when the UI must react instantly to user input. The tradeoff is larger bundles and more work in the browser.

Performance Optimization

Client rendering can still be fast when you manage bundle size and avoid unnecessary re-renders.

Code Splitting

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/Heavy'), {
  loading: () => <p>Loading...</p>,
  ssr: false
})

State Management

import { useCallback, useMemo } from 'react'

function OptimizedComponent({ data }) {
  const processedData = useMemo(() => {
    return expensiveOperation(data)
  }, [data])

  const handleClick = useCallback(() => {
    // Handle click event
  }, [])

  return <div onClick={handleClick}>{processedData}</div>
}

Best Practices

Use these habits to keep CSR maintainable as the app grows.

• Implement proper loading states
• Handle errors gracefully
• Use code splitting for large applications
• Optimize bundle size
• Consider using a service worker for offline support

Common Pitfalls

Most CSR issues show up as slow initial load, missing error states, or UI that cannot render without JavaScript.

Next Steps

If you are choosing a rendering strategy for a content page, start with SSR or ISR. Use CSR when interactivity is the main value.

Server-side Rendering

Learn about server-side rendering for better SEO and initial load.

SSR Guide

Incremental Static Regeneration

Explore ISR for static content that updates periodically.

ISR Guide