Server Deferred

Server Deferred Data

Server loaders can also return promises for deferred data. The promises are serialized using tagged JSON and streamed to the client for progressive hydration. This demonstrates the full server-to-client data flow with Suspense and Await.

Instant (Server Timestamp)

Server data loaded at 2026-09-30T12:30:45.245Z

1.5 Second Server Delay

Server data loaded after 1.5 seconds

3 Second Server Delay

Server data loaded after 3 seconds

How it works:

  1. Server loader runs and returns an object with promises
  2. Fast data is included in the initial HTML response
  3. As promises resolve, the server streams HTML for each section
  4. The client hydrates as soon as the fast data arrives; each deferred value follows in a later script as its promise settles
  5. Later client data requests stream tagged JSON resolutions as NDJSON

Example Code

// server-deferred.ts (server-only loader)
import { delay } from "@std/async/delay";

export async function loader() {
  return {
    fastData: "Instant from server!",
    slowData: delay(1500).then(() => "Streamed later")
  };
}

// server-deferred.tsx (component)
<Suspense fallback={<Loading />}>
  <Await resolve={loaderData.slowData}>
    {(data) => <div>{data}</div>}
  </Await>
</Suspense>