---
title: "renderFragment"
headingIds: ["renderfragment", "signature", "options", "usage"]
---

# renderFragment

Rend un fragment identifié pour une route ou une régénération à la demande.

## Signature

`renderFragment` utilise la même représentation qu’un fragment généré par `emitFragments`, pour l’identifiant demandé.

```tsx
import { renderFragment } from "@vincle/flow";

function renderFragment(
  id: string,
  content: DeferContent,
  options: RenderFragmentOptions,
): Promise<{ url: string; html: string }>;
```

## Options

Utilisez le même `adapter` et le même `generatePath` que pour la page initiale. Les options de délai et `onError` permettent de traiter les échecs.

| Option         | Type                                                           | Valeur par défaut                    | Description                             |
| -------------- | -------------------------------------------------------------- | ------------------------------------ | --------------------------------------- |
| `adapter`      | `Adapter`                                                      | Obligatoire                          | Même adaptateur que le build de la page |
| `generatePath` | `(id: string) => string`                                       | ``(id) => `/fragments/${id}.html` `` | Même convention que le build de la page |
| `timeout`      | `number`                                                       | Aucune                               | Transmis au `<Defer>` sous-jacent       |
| `onError`      | `(error: unknown, info: FlowErrorInfo) => JSX.Element \| void` | Aucune                               | Transmis au `<Defer>` sous-jacent       |

## Utilisation

L’application écrit le résultat à l’URL attendue ou le renvoie depuis une route. Pour un itérable asynchrone, le rendu conserve la dernière valeur ; une séquence infinie ne termine donc pas.

```tsx
import { renderFragment } from "@vincle/flow";
import { NativeAdapter } from "@vincle/flow/adapters";

declare function fetchPrice(symbol: string): Promise<{ value: number }>;

// Any standard Request → Response handler (e.g. an edge function).
export default async function handler(req: Request): Promise<Response> {
  const symbol = new URL(req.url).searchParams.get("symbol");
  if (!symbol) return new Response("Missing symbol", { status: 400 });

  const price = await fetchPrice(symbol);
  const { url, html } = await renderFragment(
    `price-${symbol}`,
    <span>{price.value.toFixed(2)}</span>,
    { adapter: NativeAdapter },
  );

  // Write `html` to `url`: the page that includes it needs no rebuild.
  return Response.json({ url, html });
}
```