Routes & Layouts

A language in the path gives every translation its own address, so it can be linked, bookmarked, prerendered, crawled and cached as a distinct page. A cookie-only language makes one address return different text to different visitors.

Each matched route segment declares head entries as data. The framework collects them along the matched chain, merges them into one set, and writes that into the document head before the body, so every URL ships its own head.

It fetches a payload for only the route segments that differ between the current URL and the target — their data and, if missing, their code — then swaps those segments into the page that is already running.

Each matched path segment can contribute a route module, and the framework nests them outermost first: the top level renders the document shell, every level below renders inside its parent's slot, and the innermost module renders the page.

A redirect sends a response telling the client to request a different URL, so the address bar changes and a second request happens. A rewrite serves another route's content under the requested URL, invisibly, in one round trip.

A dynamic segment matches exactly one non-empty path segment and hands the route one value. A catch-all matches the whole remainder as an ordered collection. The optional form of either also matches the shorter URL where that part is absent.

The deeper declaration usually wins for an entry the framework can identify by key, while entries it cannot tell apart accumulate and both appear. Frameworks differ on whether a nested group is replaced wholesale or merged field by field.

Common triggers are a link entering the viewport, idle time after load, and intent signals such as hover, focus or touch start. Each fetch that is never clicked still costs bandwidth, an origin request and memory.

The router diffs the previously matched chain against the newly matched one. Levels that match identically stay mounted and their data step is not called again; from the first level that differs downward, modules re-render and their data steps run again.

The status ships with the response headers; the not-found page is only the body. If absence is discovered after the response commits, or the page is a prerendered file whose host sets no status, the two disagree.

The redirect is computed from one visitor's request but stored under the URL alone, so the shared cache replays that first decision to everyone. A response chosen from request data must not be cached as if it were the same for all.

The more specific shape wins: a literal segment beats a dynamic one, which beats a catch-all, compared depth by depth from the left. A directory tree has no declaration order, so routers rank by specificity instead.

It groups route files on disk — by section, team or shared shell — without contributing a URL segment. URLs are unchanged, so two groups describing the same path collide, and the grouping is invisible in the address.

How the translation catalogues are split. Ship them all in one bundle and every visitor downloads every language; split one artifact per language and only the active one loads; scope them to the route and only that page's strings load.

The build output becomes roughly paths times languages: every route is rendered once per language, so build time, artifact size and deploy time scale with the language count. Teams bound it by prerendering only high-traffic languages and rendering the rest on demand.

Their content derives from the route table and the same data the pages read, which only the build or the running server knows. Generating them as routes keeps them in step; a checked-in file drifts the moment the content changes.

Resolve the data before it can produce the head — and therefore before the first byte of the document. The head computation joins the critical path, usually sharing a per-request read cache so the same record is not fetched twice.

Scroll, focus and announcement are handled by the browser only on a real document load. A script-driven view swap leaves scroll where it was, focus on an element that may be gone, and says nothing to assistive technology.

A client router must decline anything it does not own or cannot apply: another origin or a path outside the app, a modified or middle click, a target or download attribute, and any response it cannot render.

Only the slot of the nearest enclosing boundary. The levels above it keep rendering, so shared chrome stays on screen, and if no level near the problem declares a boundary the state bubbles upward and replaces more of the page.

Generate types from the tree and stop writing paths by hand: a route-pattern union, typed parameters and a path-building helper turn a rename into a compile error. Add a generated route listing and a pipeline link check.

The head was rendered into the stored HTML when the page was built and stays frozen there until that page is produced again; only the body is being refreshed by a client fetch after load. Consumers that never execute scripts read the frozen values.

Everything the still-mounted levels hold survives: their component state, their DOM state such as uncontrolled input values and open menus, and their timers, subscriptions and in-memory caches. The replaced subtree is torn down, so the outgoing route's own state is gone.

The build only emits the rules; the hosting target executes them. A static host's generated routing config, a function platform's request handler and an in-process router differ in expressiveness, ordering, rule limits and cost, so identical rules diverge.

The mode decides whether code is running and whether bytes were sent. A prerendered route fails at build; a per-request route picks a status or redirects; a streamed route already promised 200; a regenerated one serves its last good copy.

Decide by who reads the route table and how routes are created. Convention removes registration bugs and scales across teams; a central list stays readable and programmable. At scale, usually convention plus a generated listing and enforced conventions.

Decide by what the locale really is. A path segment is the default for public, linkable, cacheable pages; a hostname per locale only when locales are separate country businesses; a stored preference only behind a login, where nothing is shared or indexed.

Set defaults per class of surface rather than globally, budget the added bandwidth and origin load explicitly, and validate with paired numbers: navigation latency by whether the payload was warm, and the share of prefetches never used.

Price it against the whole subtree. A shared level's data step, bundle, blocking time and failure surface are paid by every route beneath it, so put work there only when every route genuinely needs it and the cost is bounded.