React, Preact et solide

bext fournit des adaptateurs SSR qui vous permettent de restituer les composants React, Preact ou Solid en chaînes HTML dans vos sites de modèles. Cela vous permet d'utiliser les bibliothèques de composants existantes avec le JSX intégré de bext sans les réécrire.

Chaque adaptateur encapsule la fonction synchrone renderToString du framework pour une utilisation dans le pool de tâches de rendu de bext.

Adaptateur React#

L'adaptateur React restitue les composants React en chaînes HTML à l'aide de react-dom/server.

Installation#

Ajoutez React aux dépendances de votre projet :

bash

bun add react react-dom
bun add -d @types/react @types/react-dom

Usage#

tsx

import { renderReact } from "@bext-stack/framework/react";

// A standard React component
function PriceChart({ data }: { data: number[] }) {
  return (
    <div className="chart">
      {data.map((value, i) => (
        <div
          key={i}
          className="bar"
          style={{ height: `${value}%`, width: '20px', background: '#06b6d4' }}
        />
      ))}
    </div>
  );
}

// Render to HTML string
const chartHtml = renderReact(PriceChart, { data: [20, 45, 80, 35, 60] });

Intégration dans les modèles JSX bext#

Utilisez dangerouslySetInnerHTML pour intégrer la sortie React dans votre mise en page JSX bext :

tsx

// server/template.tsx — bext JSX template
import { renderReact } from "@bext-stack/framework/react";
import { PriceChart } from "./components/PriceChart";

function ProductPage({ product }: { product: Product }) {
  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p>{product.description}</p>

      {/* React component rendered to HTML */}
      <div dangerouslySetInnerHTML={{
        __html: renderReact(PriceChart, { data: product.priceHistory })
      }} />
    </div>
  );
}

API#

typescript

/** Render a React component to an HTML string. */
function renderReact(component: any, props?: Record<string, any>): string;

/** Render an already-created React element to a string. */
function renderReactElement(element: any): string;

Adaptateur Preact#

Preact est une alternative de 3 Ko à React avec la même API. Utilisez-le lorsque vous avez besoin de composants compatibles React sans la surcharge du bundle de 7,5 Mo.

Installation#

bash

bun add preact preact-render-to-string

Usage#

tsx

import { renderPreact, renderPreactComponent, h } from "@bext-stack/framework/preact";

// Using Preact's h() function
function Badge({ text, color }: { text: string; color: string }) {
  return h("span", {
    class: "badge",
    style: `background:${color}; padding:2px 8px; border-radius:4px; color:white; font-size:12px`
  }, text);
}

// Render a component with props
const badgeHtml = renderPreactComponent(Badge, { text: "New", color: "#10b981" });
// <span class="badge" style="background:#10b981; padding:2px 8px; border-radius:4px; color:white; font-size:12px">New</span>

// Or render a VNode directly
const html = renderPreact(h(Badge, { text: "Sale", color: "#f43f5e" }));

Avec PreactJSX#

Si vous configurez jsxImportSource: "preact" dans un tsconfig distinct pour vos composants Preact, vous pouvez utiliser la syntaxe JSX :

tsx

// components/Counter.tsx (compiled with jsxImportSource: "preact")
export function Counter({ initial }: { initial: number }) {
  return (
    <div class="counter">
      <button>-</button>
      <span>{initial}</span>
      <button>+</button>
    </div>
  );
}

tsx

// In your bext template
import { renderPreactComponent } from "@bext-stack/framework/preact";
import { Counter } from "./components/Counter";

const counterHtml = renderPreactComponent(Counter, { initial: 0 });

API#

typescript

/** Render a Preact VNode to an HTML string. */
function renderPreact(vnode: VNode): string;

/** Render a Preact component with props to an HTML string. */
function renderPreactComponent(component: any, props?: Record<string, any>): string;

Adaptateur solide#

L'adaptateur Solid enveloppe le renderToString de Solid pour un SSR synchrone.

Installation#

bash

bun add solid-js

Usage#

tsx

import { renderSolid } from "@bext-stack/framework/solid";

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

const html = renderSolid(() => <Greeting name="World" />);
// <h1>Hello, World!</h1>

API#

typescript

/**
 * Render a Solid component tree to an HTML string.
 * Pass a function that returns the component (Solid's rendering convention).
 */
function renderSolid(fn: () => any): string;

Remarque : Solid est chargé paresseusement au moment de l'exécution. Si solid-js ne fait pas partie de vos dépendances, renderSolid() renvoie un message d'erreur clair.

Mélanger les frameworks sur une seule page#

L'un des principaux avantages de l'architecture de bext est que vous pouvez utiliser différents frameworks pour différentes parties de la même page. La mise en page bext JSX restitue le shell de la page et React / Preact /Solid restitue les composants individuels :

tsx

// server/template.tsx
import type { Page, RenderContext } from "@bext-stack/framework";
import { renderReact } from "@bext-stack/framework/react";
import { renderPreactComponent } from "@bext-stack/framework/preact";
import { DataTable } from "./components/DataTable";   // React component
import { SearchBox } from "./components/SearchBox";    // Preact component

export function renderPage(page: Page, ctx: RenderContext): string {
  return (
    <html lang="en">
      <head>
        <title>{page.title}</title>
        <link rel="stylesheet" href="/styles.css" />
      </head>
      <body>
        {/* bext JSX — zero overhead */}
        <nav className="topnav">
          <a href="/">Home</a>
          <a href="/products">Products</a>
        </nav>

        <main>
          {/* Preact component — 3KB, lightweight */}
          <div dangerouslySetInnerHTML={{
            __html: renderPreactComponent(SearchBox, {
              placeholder: "Search products..."
            })
          }} />

          {/* Page content */}
          <div dangerouslySetInnerHTML={{ __html: page.html }} />

          {/* React component — for complex data grids */}
          <div dangerouslySetInnerHTML={{
            __html: renderReact(DataTable, {
              columns: ["Name", "Price", "Stock"],
              endpoint: "/api/products"
            })
          }} />
        </main>

        {/* bext JSX footer — zero overhead */}
        <footer>&copy; 2026 My Store</footer>
      </body>
    </html>
  );
}

Quand utiliser chacun#

Cadre	Taille du paquet	Idéal pour
bext JSX	0 Ko	Mises en page statiques, barres de navigation, pieds de page, cartes, coques de page
Preact	~3 Ko	Composants interactifs légers, remplacement instantané du React
React	~140 Ko	Composants complexes avec hooks, bibliothèques React existantes
Solide	~7 Ko	Composants réactifs à granularité fine, interfaces utilisateur hautes performances

Règle générale : Utilisez bext JSX pour tout ce qui ne nécessite pas d'interactivité côté client. N'utilisez React / Preact /Solid que lorsque vous disposez de composants existants ou que vous avez besoin de leurs fonctionnalités spécifiques pour SSR.

Guide de décision#

Contenu statique (texte, images, navigation) -- utiliser bext JSX
Affichage des données rendues par le serveur (tableaux, graphiques, listes) - utilisez Preact (petite surcharge) ou React (si vous disposez déjà des composants)
Composants clients interactifs (formulaires, modaux, widgets en temps réel) - utilisez le Modèle d'îles avec React ou Preact pour l'hydratation du client
Interfaces utilisateur réactives basées sur les données : utilisez Solid pour une réactivité plus fine

Conseil

Ces adaptateurs sont destinés uniquement au rendu côté serveur : ils produisent une chaîne HTML que bext envoie au client. Pour les composants interactifs qui doivent s'hydrater dans le navigateur, associez-les au Modèle d'îles.

Notes de performances#

Les trois adaptateurs utilisent le renderToString synchrone, qui s'exécute dans le pool de tâches de rendu de bext. Le rendu est monothread par travailleur mais parallélisé sur l'ensemble du pool (par défaut : 4 travailleurs).

Le luminaire canonique actuel de 38,3 Ko, validé en octets, rapporte :

Approche	Temps de rendu
bext JSX, direct `h()`	69,3 µs en moyenne / 62,1 µs p50
bext JSX automatique	75,3 µs en moyenne / 67,9 µs p50
Solide `renderToString`	78 µs en moyenne / 61 µs p50
React 19 `renderToString`	1 823 µs en moyenne / 1 646 µs p50
Preact `renderToString`	Ne pas réexécuter dans le match en cours

Il s'agit de chiffres de rendu uniquement sur Bun 1.3.13, épinglés à un seul cœur, et non d'une latence complète des requêtes. La plage précédente de Preact est intentionnellement omise jusqu'à ce qu'elle soit réexécutée sur le même DOM et la même porte de validation d'octets.

Pour les pages qui sont pour la plupart statiques avec un ou deux composants de framework intégrés, la surcharge est négligeable car le cache ISR de bext stocke le code HTML rendu et répond aux requêtes ultérieures à partir du cache.

En rapport#

Exécution JSX — JSX intégré direct et sécurisé par défaut de bext, la valeur par défaut pour les shells de page
Modèle d'îles — hydratation du client pour les composants interactifs React / Preact / Solides
PRISM — Framework TSX SSR natif de bext pour le rendu serveur pleine page
Exécution client — comment bext envoie JS au navigateur
Guide de mise en cache — Cache ISR qui stocke la sortie HTML rendue