100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace
Next.js App Router
35 minintermediate

Static, Dynamic and ISR Rendering

Every route in the App Router is rendered using one of a small number of strategies, and which one applies determines when the work of producing the page happens, how fast it is served, and how current its data is. The three strategies you must understand are static rendering, where the page is produced once at build time and served as a cached artifact; dynamic rendering, where the page is produced fresh on every request; and Incremental Static Regeneration, which is static rendering that is allowed to update itself periodically or on demand without a full rebuild. These are not settings you usually toggle directly with a single switch; instead, Next.js infers the strategy from how your code behaves — what data you fetch and how, and which request-specific APIs you touch.

This inference-based model is powerful but it is also the source of a great deal of confusion, because a developer can change a route's rendering strategy without realizing it simply by adding a call to read cookies or by changing a fetch's cache option. The same page that was a blazing-fast static artifact yesterday becomes a per-request dynamic render today, with measurably different performance, because one line opted it into dynamic behaviour. Mastering rendering strategies therefore means learning to read your own code the way Next.js does — recognizing which constructs force which strategy — so that the rendering behaviour of every route is something you chose deliberately rather than something that happened to you. This lesson maps each strategy, the signals that select it, and how to combine them within one application so each route renders the way its content actually demands.

Analogy🏏Cricket
🏏 Think of it like cricket: Picture a Test match where, before the openers walk out, the curator has already prepared the pitch, the umpires are positioned, and the scoreboard is live — the players just play. Plain React is like arriving at an empty ground and being told to roll the pitch, set the field, and wire up the scoreboard yourself before a single ball is bowled. Just as the prepared ground lets the batsmen focus on batting rather than groundskeeping, Next.js prepares routing, rendering, and bundling so you focus on features rather than plumbing. Just as the live scoreboard shows runs the instant a shot is played, server rendering hands the browser finished HTML the instant the page loads. And just as every Test follows the same agreed laws so any team can play anywhere, the App Router's file conventions mean any developer can read the folder structure and instantly know the routes. This reveals why Next.js wins on large teams: shared conventions remove the guesswork that custom setups create.
Lesson 14 of 35
0% complete