v141 · miscellaneous

Navigation API: deferred commit (precommit handlers)

Normally, when navigateEvent.intercept() is called, the intercepted navigation commits (and therefore the URL updates) as soon as the NavigateEvent finishes dispatch.

concepts

  1. precommit Handler

    Navigation API introduces a precommit phase, letting sites do async work BEFORE the DOM swap. Use for hydration prep, prefetch, or analytics that must run before content changes.

  2. Lazy Route Redirect

    Auth-gated route: precommit checks auth, redirects to /login?next=… before the URL ever flips to the protected path. The whole flow is one navigation entry, no URL flash.

  3. Async Data Prep

    The React Router / Remix / TanStack "loader" pattern. Precommit fetches the new page data while the old page stays on screen with scroll and focus intact — then commits when ready.

  4. Route Interceptor

    Four-route SPA wired to the Navigation API with a precommit handler on every route. A timeline panel shows the navigate → precommit → commit → finish sequence with timestamps, and a simulated 800 ms async load so you can see the URL hold until the handler resolves.

why it shipped

In developing the navigation API, we heard feedback (https://github.com/WICG/navigation-api/issues/66) that our current policy of immediately committing the navigation does not match with how routing libraries currently model asynchronous same-document navigations.

references