CSR

Client-Side Rendering

Generated at

Waiting for the browser…

Client-only state (no server round-trip)

How it works

  1. This page is a Client Component ("use client"). The server sends a JS bundle and a shell, not the finished timestamp.
  2. useEffect runs only in the browser after hydration, then Date.now() is computed on the client.
  3. View Page Source will show “Waiting for the browser…” — the real time appears only after JavaScript runs.
  4. Use CSR for highly interactive UI (dashboards, widgets) where the first paint can wait for the browser.

How to test

  1. Open /csr. You should briefly see “Waiting for the browser…”, then a timestamp.
  2. Right-click → View Page Source (not Inspect). Search for “Waiting for the browser”. That string is in the HTML. The ISO timestamp is not.
  3. Open DevTools → Network, reload, and confirm a JS bundle loads before the timestamp appears.
  4. Click the button. The count updates instantly with no new document request — that is client state.
  5. Refresh: the timestamp changes (new client render) and the click count resets (state lives only in the browser).