Next Rendering Demo
Next.js offers multiple page rendering strategies, each optimized for different use cases. This demo showcases how pages can be rendered, when data is fetched, and what the resulting HTML looks like for users. Explore each page to see the differences in static, server-side, incremental, and client-driven rendering.
Static Routes
Static routes have fixed URL paths, such as /about or /contact. They represent pages with predefined URLs that do not change.
Dynamic Routes
Dynamic routes have variable URL paths that include parameters, such as /page/[id] or /resource/[id]/sub-resource/[sub-resource-id]. These routes represent pages with URLs that change based on the parameter values, allowing for dynamic content based on the path.
Build Logs
Route (app) Revalidate Expire ┌ ○ / ├ ○ /_not-found ├ ƒ /dynamic-rendering ├ ○ /dynamic-rendering/dynamic-route ├ ƒ /dynamic-rendering/dynamic-route/[name] ├ ○ /dynamic-rendering/dynamic-route/streaming ├ ƒ /dynamic-rendering/dynamic-route/streaming/[name] ├ ○ /dynamic-rendering/dynamic-route/streaming/partial ├ ƒ /dynamic-rendering/dynamic-route/streaming/partial/[name] ├ ƒ /dynamic-rendering/streaming ├ ƒ /dynamic-rendering/streaming/partial ├ ○ /ssg/dynamic-route ├ ● /ssg/dynamic-route/[name] │ ├ /ssg/dynamic-route/bulbasaur │ ├ /ssg/dynamic-route/ivysaur │ ├ /ssg/dynamic-route/venusaur │ ├ /ssg/dynamic-route/charmander │ ├ /ssg/dynamic-route/charmeleon │ ├ /ssg/dynamic-route/charizard │ ├ /ssg/dynamic-route/squirtle │ ├ /ssg/dynamic-route/wartortle │ └ /ssg/dynamic-route/blastoise ├ ○ /ssg/dynamic-route/isr ├ ● /ssg/dynamic-route/isr/[name] 1m 1y │ ├ /ssg/dynamic-route/isr/chikorita 1m 1y │ ├ /ssg/dynamic-route/isr/bayleef 1m 1y │ ├ /ssg/dynamic-route/isr/meganium 1m 1y │ ├ /ssg/dynamic-route/isr/cyndaquil 1m 1y │ ├ /ssg/dynamic-route/isr/quilava 1m 1y │ ├ /ssg/dynamic-route/isr/typhlosion 1m 1y │ ├ /ssg/dynamic-route/isr/totodile 1m 1y │ ├ /ssg/dynamic-route/isr/croconaw 1m 1y │ └ /ssg/dynamic-route/isr/feraligatr 1m 1y ├ ○ /static-rendering ├ ○ /static-rendering/build-time-fetch └ ○ /static-rendering/isr 1m 1y
○ (Static) prerendered as static content ● (SSG) prerendered as static HTML (uses generateStaticParams) ƒ (Dynamic) server-rendered on demand