An interactive laboratory visualizing the temporal differences between Next.js rendering methods. Watch how “Time” flows differently in each quadrant.
Waiting for client...
Rendered entirely in the browser. Initial load shows a skeleton/spinner until JavaScript executes.
Waiting for client...
Streaming in progress...
Timestamp: 12:10:25
Generated once at build time. Extremely fast, but data remains frozen until the next deployment.
Timestamp: 12:10:25
Hybrid approach. Serves static HTML (fast) but regenerates it in the background every 10 seconds.
Soft Refresh
router.refresh()
Search for a command to run...
Timestamp: 12:10:27
Fetched fresh on every single request. Increases server load but ensures data is never stale.