Server Deferred

Server Deferred Data

Server loaders can also return promises for deferred data. The promises are serialized using CBOR 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-03-09T09:04:02.462Z

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. Promises are serialized using CBOR with custom tags
  4. Client hydrates immediately with Suspense fallbacks
  5. As server promises resolve, data streams to the client

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>