---
title: "renderToStream"
headingIds: ["rendertostream", "signature", "options", "usage", "the-shell-is-one-chunk"]
---

# 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.

```tsx
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()](/fr/api/flow/serve) qui compose la réponse pour vous.

```tsx
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.