Îles de serveurs

Les îlots de serveurs vous permettent de restituer des composants coûteux ou dynamiques sur le serveur sans bloquer le shell de la page initiale. La page se charge instantanément avec un espace réservé, puis l'îlot est diffusé lorsque les données côté serveur sont prêtes.

Différent des îlots "use client" et "use signals". Serveur les îles concernent le rendu différé du serveur — le composant fonctionne toujours sur le serveur, juste diffusé tard pour que le shell soit expédié d'abord. Pour les îlots interactifs ** qui s'hydratent dans le navigateur, voir "use client" (basé sur React) ou "use signals" (pas de React, ~3 Ko).

Comment ça marche#

Marquez un composant comme îlot de serveurs avec la directive island :

// components/ProductReviews.tsx
"use island";

export default async function ProductReviews({ productId }: { productId: string }) {
  // This fetch happens on the server, after the page shell is sent
  const reviews = await db.reviews.findMany({ where: { productId } });

  return (
    <section>
      <h3>{reviews.length} Reviews</h3>
      {reviews.map((r) => (
        <div key={r.id}>
          <strong>{r.author}</strong>
          <p>{r.body}</p>
        </div>
      ))}
    </section>
  );
}

// pages/product/[id].tsx
import ProductReviews from "../../components/ProductReviews";

export default function ProductPage({ params }: { params: { id: string } }) {
  return (
    <main>
      <h1>Product Details</h1>
      <p>This part renders immediately.</p>

      {/* This streams in after the data fetch completes */}
      <ProductReviews productId={params.id} />
    </main>
  );
}

Comportement de rendu#

1. Shell de page — bext restitue la page complète, en remplaçant les îlots par un élément d'espace réservé <bext-island>.
2. Streaming — chaque îlot s'affiche en parallèle sur le serveur via le pool V8
3. Injection — les îlots terminés sont diffusés dans la page sous forme de balises <script> qui remplacent leur espace réservé
4. Hydratation — si l'îlot a une interactivité côté client, React l'hydrate après injection

Cela signifie:

• Le temps nécessaire au premier octet est rapide car le shell n'attend pas les données lentes
• Les îles s'affichent en parallèle, et non séquentiellement : une requête de base de données lente sur une île ne bloque pas les autres.
• Le référencement de est préservé. — le code HTML final contient le contenu complet rendu pour les robots d'exploration

Configuration#

# bext.config.toml
[render]
islands = true            # default: auto-detected from "use island" directives
island_timeout_ms = 10000 # timeout per island (renders fallback on timeout)
island_concurrency = 8    # max parallel island renders per request

Contenu de secours#

Fournissez une solution de secours qui s'affiche pendant le chargement de l'îlot ou en cas d'expiration :

<ProductReviews productId={id} fallback={<p>Loading reviews...</p>} />

Si l'îlot tombe en panne ou expire, la solution de secours reste en place et une erreur est enregistrée. Le reste de la page n'est pas affecté.

Quand utiliser les îlots de serveurs#

Comparaison avec le streaming SSR#

Les îlots de serveurs diffèrent du streaming intégré de React (via les limites de Suspense) :

• Les îlots sont des au niveau des composants : vous marquez des composants individuels, pas des limites de Suspense.
• Les îlots s'exécutent en parallèle. — le pool V8 distribue les rendus entre les nœuds de calcul
• Les îlots prennent en charge le délai d'attente + le repli — la dégradation gracieuse est intégrée
• Les îles fonctionnent sans React : il s'agit d'une fonctionnalité de la plate-forme bext, non liée à un framework.

En rapport#

• Cadres — Îles — Îles interactives "use client" pour l'hydratation du navigateur
• Cadres — Signaux — îlots réactifs "use signals" (~ 3 Ko, pas de React)
• Pool de rendu V8 — dimensionnement du pool et concurrence qui soutiennent les rendus d'îlots parallèles
• Actions du serveur — complète les îlots avec des actions de forme pour les mutations
• Mise en cache – sortie de l'îlot de cache indépendamment pour éviter les rendus répétés du serveur