---
title: "renderToStatic"
headingIds: ["rendertostatic", "signature", "options", "contexts", "usage"]
---

# renderToStatic

Construit un document HTML statique et, si nécessaire, des fichiers de fragments différés.

## Signature

`renderToStatic(fn, options?)` fournit le HTML de la page et la méthode d’émission des fragments lorsque des options de fragments sont configurées.

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

// Pure static: no adapter, no emitFragments
function renderToStatic<T>(fn: (ctx: PureStaticContext) => T): Promise<T>;

// With deferred fragments: adapter required
function renderToStatic<T>(fn: (ctx: StaticContext) => T, options: StaticOptions): Promise<T>;
```

## Options

Sans options, le rendu est purement statique. Pour des fragments séparés, fournissez `adapter` et `generatePath(id)` ; écrivez ensuite chaque résultat à l’emplacement correspondant.

| Option         | Type                     | Valeur par défaut                    | Description                                |
| -------------- | ------------------------ | ------------------------------------ | ------------------------------------------ |
| `adapter`      | `Adapter`                | Obligatoire                          | Adaptateur de représentation des fragments |
| `generatePath` | `(id: string) => string` | ``(id) => `/fragments/${id}.html` `` | Chemin d’URL de chaque fragment            |

## Contextes

La page et les fragments partagent les contextes de rendu nécessaires. Les ressources Style et Script appartiennent à la structure initiale.

| Méthode         | Signature                                                                                   | Description                                              |
| --------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| `renderPage`    | `(node: () => JSX.Element) => Promise<string>`                                              | Rend la page en chaîne HTML complète                     |
| `emitFragments` | `(emit: (id: string, url: string, html: string) => void \| Promise<void>) => Promise<void>` | Produit les fragments et appelle le callback pour chacun |

## Utilisation

Écrivez le document, puis appelez `emitFragments` pour produire les fichiers des fragments. Chaque fichier contient la représentation attendue par l’adaptateur.

```tsx
import type { JSX } from "@vincle/core";

import { renderToStatic } from "@vincle/flow";
import { NativeAdapter } from "@vincle/flow/adapters";
import { writeFile } from "node:fs/promises";

declare const pages: { Component: () => JSX.Element; out: string }[];

await renderToStatic(
  async (ctx) => {
    for (const page of pages) {
      const html = await ctx.renderPage(() => <page.Component />);
      await writeFile(page.out, "<!DOCTYPE html>\n" + html);
    }

    // One .html file per deferred fragment, already Frame-wrapped.
    await ctx.emitFragments((_id, url, html) => writeFile("./dist" + url, html));
  },
  { adapter: NativeAdapter },
);
```