---
title: "renderToString"
headingIds: ["rendertostring", "signature", "usage", "async-components", "concurrent-renders"]
---

# renderToString

Rend une valeur JSX en chaîne HTML. Core n’ajoute aucun code au navigateur.

## Signature

`renderToString(node)` accepte une valeur rendable et retourne une `Promise<string>`. Attendez toujours le résultat, même pour un arbre synchrone.

```ts
declare function renderToString(node: unknown): Promise<string>;
```

## Utilisation

Envoyez la chaîne avec un type de contenu `text/html` ou écrivez-la dans un fichier. Le contenu et les attributs sont échappés lors de la sérialisation.

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

const Page = ({ title }: { title: string }) => (
  <html>
    <head>
      <title>{title}</title>
    </head>
    <body>
      <h1>{title}</h1>
    </body>
  </html>
);

const html = await renderToString(<Page title="My Site" />);
```

## Composants asynchrones

Les composants peuvent être `async`. Le parcours attend chaque composant dans l’ordre du document ; il ne lance pas implicitement tous les composants voisins en parallèle.

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

declare const db: {
  posts: {
    findAll(opts: { limit: number }): Promise<{ id: number; slug: string; title: string }[]>;
  };
};

const Feed = async () => {
  const posts = await db.posts.findAll({ limit: 10 });
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>
          <a href={"/posts/" + p.slug}>{p.title}</a>
        </li>
      ))}
    </ul>
  );
};

const html = await renderToString(<Feed />);
```

## Rendus concurrents

Les rendus concurrents restent isolés lorsque l’environnement dispose d’AsyncLocalStorage. Chaque Provider conserve son contexte et `Scope.with()` crée une portée indépendante. Les promesses démarrées avant le rendu peuvent déjà travailler en parallèle. Consultez les [limites de Scope](/fr/api/core/scope).

```tsx
const [pageA, pageB] = await Promise.all([renderToString(<PageA />), renderToString(<PageB />)]);
```