AbsoluteJS

Out-of-Order Streaming

AbsoluteJS can stream async regions independently of DOM order. The page shell and slot fallbacks render immediately, then each slot resolves whenever its server work finishes.

#What the browser receives over time

Declaration order remains stable while each asynchronous slot resolves on its own clock.

  1. Shell
    Send the document shell, slot anchors, and every visible fallback immediately.
  2. Collect
    Start independent server work for every collected streaming slot.
  3. Fast result
    Patch the fastest completed slot even when it appears later in DOM order.
  4. Slow result
    Patch slower regions into their original anchors without reordering the page.

#What It Is

Out-of-order streaming means your fastest server work can reach the browser first even if that region appears later in the document. Declaration order stays stable in the HTML, but slot resolution order is independent.

For framework-generated pages, this behavior is opt-in. Pass collectStreamingSlots: true to the relevant framework page handler to enable slot streaming. Without it, framework handlers render as standard SSR.

This is useful for dashboards, feeds, sidebars, and any page where one expensive query should not block the rest of the response.

#Raw Slots vs Framework Primitives

AbsoluteJS exposes one streaming engine through two authoring layers:

Raw slotsyou own the fallback HTML and the resolved HTML directly. This is the lowest-level transport API and the correct abstraction for plain HTML. HTMX gets its own native streaming primitive.
Framework primitivesyou author fallback and resolved UI with JSX, Svelte markup, Vue templates, or Angular template syntax. AbsoluteJS lowers that into the same slot transport underneath, but only when the handler is enabled for streaming withcollectStreamingSlots: true.

The transport is shared. The difference is the authoring surface.

HTML
import { StreamSlot } from '@absolutejs/absolute/vue/components';

// Raw transport in a framework page: you provide fallbackHtml and resolved HTML yourself
<StreamSlot
  id="custom-slot"
  fallbackHtml="<div class='card-skeleton'>Loading...</div>"
  :resolve="async () => renderCardHtml(await getCardData())"
/>

#Current Transport

The shipped implementation keeps one HTML document response open and streams slot patches through that document. This is the most SSR-native model and works across the supported frameworks.

BehaviorCurrent transport (shipped default)Detached transport (planned)
Document responseOne HTML document response stays openInitial HTML document closes earlier
Slot fallbacksIn the initial HTMLStill rendered in the initial HTML
Resolved slot patchesArrive through the same responseArrive over a secondary channel such as streaming fetch() or SSE

With the current transport, the browser tab can keep showing a loading spinner until the final slot patch arrives. The detached transport keeps the same slot APIs — only the delivery transport semantics differ.

#Raw Slots

Use raw slots when you want direct control over placeholder and resolved HTML. Plain HTML keeps the transport explicit by passingstreamingSlots to handleHTMLPageRequest. HTMX uses <abs-htmx-stream-slot>, which AbsoluteJS lowers to native hx-get fragment requests.

For raw HTML slots, the placeholder element's id should match the slot id exactly. data-absolute-slot="true" marks the node as a streaming slot, and the runtime patches that exact element by id.

This page is the transport overview. The concrete raw-slot examples and API details should live on the HTML and HTMX pages, where the authoring model is specific to those surfaces.

#Framework Primitives

Framework primitives give you the same out-of-order transport but let you author fallback and resolved UI in the framework's native syntax.

In practice, that means React exposes SuspenseSlot and StreamSlot, Svelte exposes AwaitSlot and StreamSlot, Vue exposes SuspenseSlot and StreamSlot, and Angular supports both raw streaming slot components and lowered @defer boundaries.

Framework page handlers default to regular SSR. Enable them here only when you need out-of-order streaming by passing { collectStreamingSlots: true } as the page-handler options argument.

This page is the transport overview. The framework-specific component pages should hold the concrete framework examples and API details for those primitives.

#Detached Transport

AbsoluteJS also has a planned second transport mode where the initial document can close earlier and late slot updates can arrive over a secondary channel such as streaming fetch or SSE. That is not the current default and should be treated as a follow-on enhancement, not as missing functionality in the current feature.