Aller au contenu
Vincle

Chargement…

    Moteur de rendu JSX côté serveur

    Vos vues en JSX.
    Votre application en HTML.

    Composez des composants typés et asynchrones sur votre serveur. Envoyez une réponse HTML, puis laissez arriver les parties lentes lorsqu’elles sont prêtes.

    Rendre votre première vueDécouvrir le streaming
    Fenêtre de terminal
    npm install @vincle/core
    Du JSX au HTMLTypeScript
    hello.tsx
    import { renderToString } from "@vincle/core";
    

    function App({ name }: { name: string }) {
      return <h1>Hello, {name}!</h1>;
    }
    

    const page = <App name="world" />;
    const html = await renderToString(page);
    <h1>Hello, world!</h1>

    Le résultat est une simple chaîne HTML.

    Environnements compatibles
    • Node.js 22+
    • Bun
    • Deno
    • Cloudflare Workers

    Commencez par une vue.
    Adaptez-vous aux besoins de la page.#

    Conservez votre serveur et votre routeur. Choisissez les capacités de rendu nécessaires à chaque page.

    Différer les parties lentes

    Ajoutez @vincle/flow pour envoyer la structure de la page avant les fragments HTML différés.

    Diffuser un fragment

    La page peut arriver avant les résultats.#

    Gardez le titre visible pendant le chargement d’un composant asynchrone. Avec Flow, un contenu de repli occupe l’espace jusqu’à ce que le HTML soit prêt.

    Choisissez le mode de livraison : natif, ou via un adaptateur HTMX ou Turbo.

    Suivre l’exemple complet
    results-page.tsx
    import { Defer, renderToStream } from "@vincle/flow";
    import { NativeAdapter } from "@vincle/flow/adapters";
    

    async function findResults() {
      return [{ title: "Getting started", href: "/guide/getting-started/installation" }];
    }
    

    async function Results() {
      const items = await findResults();
      return (
        <ul>
          {items.map((item) => (
            <li>
              <a href={item.href}>{item.title}</a>
            </li>
          ))}
        </ul>
      );
    }
    

    function Page() {
      return (
        <main>
          <h1>Search results</h1>
          <Defer fallback={<p>Loading results…</p>}>
            <Results />
          </Defer>
        </main>
      );
    }
    

    const stream = renderToStream(() => <Page />, NativeAdapter);

    Le composant Results reste identique. La page choisit le rendu différé.

    Inclus dans le moteur.#

    Des vues typées, un rendu prévisible et des frontières HTML explicites.

    Voir les sources sur GitHub

    Composants asynchrones

    Chargez les données dans le composant qui en a besoin. Vincle attend le résultat de l’arbre.

    Contexte de l’arbre

    Partagez une valeur avec un sous-arbre via un Provider, ou conservez l’état de la requête dans une portée Scope.

    Échappement HTML

    Le contenu est échappé par défaut, les schémas d’URL dangereux sont bloqués et les fonctions sont refusées comme valeurs d’attributs.

    Prise en charge de TypeScript

    TypeScript vérifie vos composants et leurs attributs HTML.