renderToStream

Produit un flux HTML contenant la structure initiale, les fragments différés et la fermeture du document.

Signature#

renderToStream(node, adapter, options?) retourne un ReadableStream<string>. Un adaptateur contrôle la représentation des fragments.

import { renderToStream } from "@vincle/flow";

function renderToStream(
  node: () => JSX.Element,
  adapter: StreamingAdapter,
  opts?: FlowOptions & { mode?: "full" | "fragment" },
): ReadableStream<string>;

Options#

L’adaptateur est passé en deuxième argument. Les options comprennent signal, onError, defaultTimeout et le mode document ou fragment. L’annulation arrête l’attente des contenus différés.

Option	Type	Valeur par défaut	Description
`signal`	`AbortSignal`	Aucune	Signal d’annulation du flux
`onError`	`FlowOptions["onError"]`	Aucune	Gestionnaire d’erreur du fragment ou du flux
`defaultTimeout`	`number`	Aucune	Délai de rendu de chaque fragment en ms
`mode`	`"full" \| "fragment"`	`"full"`	`"fragment"` omet la structure initiale et la fermeture

Utilisation#

Encodez les chaînes pour une réponse HTTP, ou utilisez serve() qui compose la réponse pour vous.

import { Slot, Defer, renderToStream } from "@vincle/flow";
import { NativeAdapter } from "@vincle/flow/adapters";

declare function fetchComments(): Promise<{ text: string }[]>;

async function Comments() {
  const items = await fetchComments();
  return (
    <ul>
      {items.map((c) => (
        <li>{c.text}</li>
      ))}
    </ul>
  );
}

// <Slot> declares the placeholder with fallback content in the shell.
// <Defer> pushes the real content, which replaces it when resolved.
function Page() {
  return (
    <html>
      <body>
        <h1>My page</h1>
        <Slot name="comments">
          <p>Loading comments…</p>
        </Slot>
        <Defer target="comments">{() => <Comments />}</Defer>
      </body>
    </html>
  );
}

const stream = renderToStream(() => <Page />, NativeAdapter);

// e.g. Node: for await (const chunk of stream) res.write(chunk);

La structure initiale forme un seul chunk#

La structure initiale est un seul chunk. Les composants asynchrones ordinaires de cette structure sont attendus avant son envoi ; placez les régions lentes dans <Defer> pour les livrer plus tard.