--- title: "JSX pour le serveur" description: "Composez des vues JSX typées sur votre serveur. Ajoutez des fragments HTML progressifs selon les besoins de vos pages." prose: false ---
{"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 vue"} {"Découvrir le streaming"}
```bash tab="npm" sync="pkg-manager" npm install @vincle/core ``` ```bash tab="pnpm" sync="pkg-manager" pnpm add @vincle/core ``` ```bash tab="bun" sync="pkg-manager" bun add @vincle/core ```
{"Du JSX au HTML"} {"TypeScript"}
```tsx title="hello.tsx" import { renderToString } from "@vincle/core"; function App({ name }: { name: string }) { return

Hello, {name}!

; } const page = ; const html = await renderToString(page); ``` ```html

Hello, world!

```

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

{"Environnements compatibles"}

{"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"}
```tsx title="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 ( ); } function Page() { return (

Search results

Loading results…

}>
); } const stream = renderToStream(() => , 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."}