NEXT.JS · ROUTING & RENDERING
NOTES — ED. 2026.08
The shape of an address and when its screen is built are different questions.
Keep Route and Render separate.
“Static” and “dynamic” can describe both the shape of a path and when a page is created. Dynamic addresses can also be generated in advance, so read these as two separate axes.
FIG. 01WHERE IT LIVES — WHEN IT IS MADE
URLROUTE · SEGMENT
Routing — connect a URL to a screen
ROUTING · 2026Routing determines which screen a browser URL connects to. A path whose segments are fixed, such as /about, is a fixed path. A path with values that differ between pages, such as /products/42, uses a dynamic segment to handle multiple URLs through one rule.
In the Next.js App Router, folders create URL segments and a page file defines the UI shown at that path. products/[id]/page handles /products/42 and /products/99 under the same page rule, reading the id value from params.
STATIC · DYNAMICNESTED · CATCH-ALL
Static and dynamic routes
ROUTE SHAPES · 2026A static route has fixed path segments, as in /about or /pricing. A dynamic route receives actual URL values in named positions such as [id] or [slug], representing multiple pages for data such as products, posts and users. Here, “dynamic” means part of the address rule is a variable. This distinction is often called static versus dynamic routing.
Nested folders produce nested URLs. You can use multiple dynamic segments, as in /shop/[category]/[product]; a catch-all segment accepts several subsequent segments together. Do not trust dynamic values as received: check their existence and format, and return 404 for invalid addresses.
LINKLAYOUT · 404
Shared UI can remain as you navigate
NAVIGATION · 2026Link is a navigation tool for moving to paths inside the application. It preserves the semantics and accessibility of an ordinary link while letting the framework apply prefetching and client-side transitions. As a rule, express navigation between documents with links rather than buttons that change the address.
A layout wraps UI shared by several child paths and can persist during navigation. loading handles the waiting screen, error an error boundary, and not-found the response for a missing path. Routing is not just a list of addresses; it is the user flow through navigation, waiting and failure.
CSR · SSR · PRERENDERINGHYDRATION
Rendering — when and where the screen is created
RENDERING · 2026 In client-side rendering (CSR), the browser executes JavaScript to create UI. In server-side rendering (SSR), the server creates HTML when a request arrives. Prerendering creates and caches HTML ahead of time during a build or revalidation. These approaches can be combined within one application according to the route and component.
Even server-generated HTML needs browser JavaScript to attach events for interaction. This process is called hydration. Server rendering and client-side transitions work together rather than being opposing choices: the server can show the first screen quickly, then subsequent navigation can continue smoothly.
ROUTE SHAPE ≠ RENDER TIMETHE KEY DISTINCTION
Do not confuse address shape with generation time
TWO AXES · 2026 A dynamic route is not necessarily generated on the server for every request. If the possible slug or id values are known at build time, multiple pages with dynamic segments can be generated ahead of time. Conversely, a fixed URL can be rendered dynamically each time by reading request cookies or search conditions.
When asked whether something is static or dynamic, first establish what the question means: the URL pattern or the time HTML is generated? Separating the questions avoids confusion even when similar terms such as static routing and dynamic rendering appear in the same sentence.
Path shapeGeneration timePossible example
Fixed path
Generation time
PrerenderingPossible example
Generate /about in advance at build timeFixed path
Generation time
Request-time renderingPossible example
Generate /dashboard for each user requestDynamic path
Generation time
PrerenderingPossible example
Generate the list of /posts/[slug] pages at build timeDynamic path
Generation time
Request-time renderingPossible example
Generate /products/[id] from request data— FIN —