Rendering Strategies
An interactive laboratory visualizing the temporal differences between Next.js rendering methods. Watch how “Time” flows differently in each quadrant.
Client Side (CSR)
Initializing
--:--:--
Waiting for client...
Rendered entirely in the browser. Initial load shows a skeleton/spinner until JavaScript executes.
Loading Server...
Initializing
--:--:--
Waiting for client...
Streaming in progress...
Static Generation (SSG)
Initializing
7:58:00 AM
Timestamp: 7:58:00
Generated once at build time. Extremely fast, but data remains frozen until the next deployment.
Incremental (ISR)
Initializing
3:30:31 PM
Timestamp: 3:30:31
Hybrid approach. Serves static HTML (fast) but regenerates it in the background every 10 seconds.
SYSTEM KERNEL EVENTS
- Waiting for system events...
Soft Refresh
Triggers router.refresh()