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.

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.

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.

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.

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