CSR/ client-side rendering'use client'

Shell delivered, UI painted in the browser.

pattern

CSR— Client-Side Rendering

pros

+highly interactive
+rich ux

cons

−slower first paint
−weaker seo

use-cases

dashboards
web apps
admin panels

flowshell → js → paint

01shell html
02download js
03execute
04render ui

liverendered in the browser

hydrating…

sourceapp/csr/page.tsx

app/csr/page.tsxtsx

1'use client'
2import { useState, useEffect } from 'react'
3 
4export default function Page() {
5  const [data, setData] = useState('')
6  useEffect(() => {
7    setData(new Date().toISOString())
8  }, [])
9  return <div>{data}</div>
10}

hint

view source: the timestamp is absent from initial html — javascript fills it after hydration.