Concepts

Fragments keep the document alive.

Normal requests return a full HTML document. Client navigations request only the route body and metadata with the x-fragment header.

Install navigation

import { installFragmentNavigation } from "/nativefragments/router.js";

installFragmentNavigation({
  prefetch: "intent",
  afterNavigate({ meta, url }) {
    console.log(meta.title, url.pathname);
  }
});

Why it matters

The app keeps browser-native navigation semantics: real links, real history, real HTML. JavaScript upgrades navigation without owning the whole page.

Nested fragments

Add data-fragment-slot to a link and target container when only one region should update.

<a href="/settings/profile" data-fragment-slot="settings-panel" data-fragment-prefetch="intent">
  Profile
</a>

<section data-fragment-slot="settings-panel">
  ...
</section>

Prefetch

Same-origin fragments are prefetched on hover and focus by default. Use declarative attributes for links that should prefetch when visible, immediately on page load, or never.

<a href="/reports" data-fragment-prefetch="visible">Reports</a>
<a href="/settings" data-fragment-prefetch="load">Settings</a>
<a href="/logout" data-fragment-prefetch="none">Log out</a>

Declarative manifest

On Cloudflare, the Worker can use HTMLRewriter to detect fragment slots and prefetch links in the rendered markup, then append a data-fragment-manifest JSON script for the browser router and agents to inspect.