← Home

Server-aware partial updates

A twist on the app-shell idea from the article: what if the server decided how much to send, based on how the page was requested?

Picture an app shell (a navbar and some state) with one marked region for the page. Click /about from inside the running app and the server sends back just a <template for="page">, the patch that fills the marked region. Request the same /about directly (type it in, or hard-refresh) and you get the whole document: the app shell with that same patch streamed right behind it. Same URL, two responses, one patch.

How does the server know the difference? The browser tells it. A full navigation carries Sec-Fetch-Mode: navigate; a fetch() from your code carries cors or same-origin. The server branches on that one header.

Live demo

The frame loads Home as a full document, which is a navigation. Click the nav links for in-app navigation: only the page region streams in, and the load timestamp (stamped when the shell is built, so it only changes on a full render) stays put. Hit ↻ reload in the frame's address bar to force a full request and watch the timestamp change.

// The same URL, /about, served two ways. The patch is identical;
// a direct request just gets the app shell streamed in front of it.

// The patch re-emits its own <?start>/<?end> range. A marker is consumed
// when it's patched, so every update has to leave a fresh one behind for
// the next one to fill.
const patch =
  `<template for="page"><?start name="page">${pageContent}<?end></template>`;

// Browsers send "Sec-Fetch-Mode: navigate" on a full page load,
// but "cors" / "same-origin" on a fetch(), so the server can tell them apart.
if (request.headers.get("Sec-Fetch-Mode") === "navigate") {
  return shell + patch; // shell streams first, then the patch fills the marker
}

return patch; // in-app request: just the patch

// Intercept in-app links and fetch the next page from the server.
link.addEventListener("click", async (event) => {
  event.preventDefault();
  const response = await fetch(link.href); // a fetch, not a navigation

  // Append the streamed <template for="page"> into <main>. It finds the
  // page marker already in the DOM and replaces only that region. The
  // navbar, its state, and its DOM identity are all left untouched.
  await response.body
    .pipeThrough(new TextDecoderStream())
    .pipeTo(main.streamAppendHTMLUnsafe());
});

Registering service worker…