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

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.

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 });
}