Next.js
/Beginner
Client Side Rendering (CSR)
Definition
A rendering strategy where the server sends a nearly empty HTML file to the browser, and React uses JavaScript to build the entire UI on the user's device.
Explain Like I'm New
The browser downloads a blank page. Then it downloads a massive JavaScript file. Then React wakes up and painstakingly draws the website onto the screen. This is how standard React (Create React App) works.
Real World Example
Highly interactive applications hiding behind a login wall where SEO doesn't matter, like Figma or a complex internal admin dashboard.
Common Use Cases
- •Complex interactive apps
- •Authenticated dashboards
- •Apps needing browser APIs (like geolocation)
Interactive Example
'use client'; // This directive tells Next.js to render this on the browser! import { useState, useEffect } from 'react'; export default function Counter() { // State and Effects ONLY work in Client Components const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Clicks: {count} </button> ); }
Interview Questions
basic
- Why is Client-Side Rendering generally bad for SEO (Search Engine Optimization)?
intermediate
- How do you force a component to use Client-Side Rendering in the Next.js App Router?