← Home

Streaming a <?marker> from the server

The most basic demo: the server sends a page with an empty marker, then streams the matching <template> a moment later, in the same response. It maps one-to-one to the first example in the article.

In these demos, we simulate the server using a service worker, which intercepts the request and streams the HTML in parts with an artificial delay, so you can watch the marker get filled.

Live demo

Here's the HTML the server streams, and the same response running live. The first paragraph and the empty marker arrive immediately, then the <template> streams in ~1.5s later and fills the marker.

HTML streamed by the server
<p>Streamed first, shown immediately.</p>

<main>
  <?marker name="content">
</main>

<!-- streamed ~1.5s later -->
<template for="content">
  <p>Here is the content that goes in the marked spot.</p>
</template>
live result (streamed)

Registering service worker…

How this works

The page arrives as a single streamed response. First comes the markup you see immediately, including a <?marker name="content">: a placeholder that renders nothing and simply holds a spot. After a short, deliberate delay (to imitate a slow server) the rest of the response arrives, a <template for="content"> whose markup drops into that spot.

No JavaScript is needed on this page. The browser matches the template to the marker by its name and fills it as the stream arrives, so content can be sent after the place it belongs.