How NavigateEvent.intercept() Simplifies SPA Routing and Improves Performance

Traditional single‑page applications (SPAs) often rely on multiple event listeners—click, popstate, submit—to manage navigation, leading to duplicated logic, hard‑to‑track edge cases, and difficulty showing loading states or cancelling in‑flight requests.

Why the old approach fails

Separate listeners mean each navigation type (link click, back/forward, form submit) requires its own handler, increasing the risk of bugs and making it hard to know when navigation starts, ends, or fails. Developers cannot reliably display spinners, cancel pending requests, or prevent navigation when a form has unsaved changes.

Enter NavigateEvent.intercept()

The new NavigateEvent.intercept() API provides a single entry point that captures all navigation events—clicks, form submissions, back/forward actions, and programmatic navigations.

navigation.addEventListener('navigate', (event) => {
  console.log('Navigating to:', event.destination.url);
});

Handlers can call event.intercept() to take control of the navigation lifecycle.

navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url);
  if (url.pathname.startsWith('/dashboard')) {
    event.intercept({
      async handler() {
        const data = await fetchDashboardData();
        renderDashboard(data);
      }
    });
  }
});

When intercepted, the browser updates the address bar immediately, waits for the handler to finish, and provides an automatic abort signal for cancelled navigations.

How interception works

Before calling intercept(), you must check event.canIntercept, event.downloadRequest, and event.hashChange. Cross‑origin navigations and downloads return false for interception.

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept || event.downloadRequest || event.hashChange) return;
  event.intercept({
    async handler() {
      // Your logic here
    }
  });
});

During interception, the URL changes instantly (unlike history.pushState() which requires manual timing). The handler can render a loading spinner, fetch content, and then render the result.

event.intercept({
  async handler() {
    console.log(window.location.pathname);
    renderLoadingSpinner();
    const content = await fetchContent();
    renderContent(content);
  }
});

The event.signal can be passed to fetch() so that if the user navigates away, the request aborts automatically, saving bandwidth and avoiding race conditions.

event.intercept({
  async handler() {
    try {
      const response = await fetch('/api/data', { signal: event.signal });
      const data = await response.json();
      render(data);
    } catch (err) {
      if (err.name === 'AbortError') return;
      showError(err);
    }
  }
});

Testing on a slow 3G connection showed that a second click cancels the first fetch, eliminating wasted requests.

Controlling scroll and focus

After the handler resolves, the browser scrolls to the top or hash fragment and focuses the first autofocus element. You can override this with manual scroll/focus:

event.intercept({
  scroll: 'manual',
  focusReset: 'manual',
  async handler() {
    await loadContent();
    document.querySelector('#main').scrollIntoView();
    document.querySelector('#search-input').focus();
  }
});

Form submissions

Form submissions trigger a navigation event with event.formData. You can intercept, send the data via fetch(), and navigate on success.

navigation.addEventListener('navigate', (event) => {
  if (event.formData && event.canIntercept) {
    event.intercept({
      async handler() {
        const response = await fetch(event.destination.url, {
          method: 'POST',
          body: event.formData,
          signal: event.signal
        });
        if (response.ok) {
          navigation.navigate('/success');
        } else {
          const errors = await response.json();
          displayErrors(errors);
        }
      }
    });
  }
});

When to use it

Multi‑route SPAs that need a centralized navigation handler.

Performance‑critical apps where automatic abort signals cut unnecessary network traffic (up to ~40% reduction in the author’s tests).

Forms where you must prevent navigation on unsaved changes.

When not to use it

If you must support Safari, which currently lacks this API.

Server‑side rendered (SSR) apps that already have their own routing solution.

Simple static sites with few pages and minimal interactivity.

Browser support

Support varies by browser; Chrome has the most complete implementation. Consult MDN for the latest compatibility tables.

Conclusion

NavigateEvent provides a fundamentally different model for routing—treating navigation as an event that can be intercepted, cancelled, and customized—making SPA code cleaner, more reliable, and more performant.