Questions fréquentes

Les réponses aux questions courantes sur le rendu serveur, la sécurité et les intégrations.

Qu’est-ce que Vincle et quand l’utiliser ?#

Vincle transforme des composants JSX en HTML. Il convient aux vues serveur, aux pages statiques et aux réponses progressives lorsque vous souhaitez conserver votre application et votre routeur.

Quelles différences avec React ?#

Vincle ne fournit pas de runtime de réconciliation client, de hooks ou d’hydratation. Les composants sont des fonctions serveur et le résultat est du HTML.

Puis-je utiliser des composants React ?#

Les composants React qui dépendent des hooks ou du runtime React ne sont pas directement compatibles. Les fonctions de présentation simples peuvent être portées en adaptant leur runtime et leurs types.

Quels environnements sont pris en charge ?#

Core prend en charge Bun, Node.js et Deno ainsi que les environnements compatibles. Vérifiez les capacités d’AsyncLocalStorage pour l’isolation des contextes et les dépendances de chaque intégration.

Comment charger des données de manière asynchrone ?#

Utilisez des composants async. Le moteur les attend dans l’ordre du document. Préparez vos promesses avant le rendu pour démarrer plusieurs chargements ensemble, ou utilisez <Defer> pour des régions progressives.

async function Page({ id }: { id: string }) {
  const user = await db.users.find(id);
  const posts = await db.posts.findByUser(id);
  return (
    <html>
      <body>
        <h1>{user.name}</h1>
        {posts.map((post) => (
          <Post key={post.id} {...post} />
        ))}
      </body>
    </html>
  );
}

const html = await renderToString(<Page id="42" />);

Comment fonctionne la sécurité ?#

Le contenu et les attributs sont échappés ; les URL passent par un filtre de schémas. raw() et rawUrl() sont des échappatoires explicites. La validation applicative, la CSP et l’assainissement du HTML restent nécessaires.

Puis-je diffuser le HTML en streaming ?#

Oui, avec @vincle/flow. Les adaptateurs définissent le format des fragments pour le polyfill natif, Turbo, HTMX ou d’autres mécanismes.

Puis-je traiter une erreur sans interrompre toute la page ?#

onError permet de remplacer le contenu d’un fragment qui échoue. Une erreur dans la structure initiale doit être traitée au niveau de la réponse globale.

serve(req, () => <Page />, NativeAdapter, {
  onError: (error, { id }) => {
    console.error(`Fragment ${id} failed:`, error);
    return <p>This section failed to load.</p>;
  },
});

Comment déboguer un problème de rendu ?#

Les erreurs portent des codes stables et des messages contextualisés. Inspectez le résultat HTML, réduisez le composant concerné et utilisez les tests du rendu pour reproduire le problème.

Quelle est la taille du package ?#

Core n’a aucune dépendance d’exécution et aucun runtime client. La taille téléchargée dépend des types et des points d’entrée utilisés ; les scripts de taille du dépôt fournissent des mesures reproductibles.

Où trouver de l’aide ?#

Consultez la documentation d’API et les issues du dépôt.