Frontière Suspense
Chaque frontière <Suspense> émet son fallback immédiatement, puis diffuse le vrai contenu résolu via un <template> hors-ordre + __bextSuspense.swap(id) lorsque les enfants se stabilisent. Ouvrez l'onglet réseau et observez l'écoulement — les fallbacks arrivent dans le premier chunk, le vrai contenu arrive au fur et à mesure de la résolution de chaque promesse.
Astuce
Importer <Suspense> depuis @bext-stack/framework/streaming active automatiquement le mode streaming pour la route — inutile de déclarer renderingMode manuellement. Chaque frontière est indépendante : une promesse lente ne bloque pas les autres.
Résultat (fallback en premier, le vrai contenu s'affiche ensuite)
- chargement rapide…
- chargement moyen…
- chargement lent…
import { Suspense } from "@bext-stack/framework/streaming";
async function slowQuery(label: string, ms: number) {
await new Promise(r => setTimeout(r, ms));
return <li>{label} ready ({ms}ms)</li>;
}
export default function Page() {
return (
<ul>
<Suspense fallback={<li>loading fast…</li>}>{slowQuery("fast", 100)}</Suspense>
<Suspense fallback={<li>loading med…</li>}>{slowQuery("med", 300)}</Suspense>
<Suspense fallback={<li>loading slow…</li>}>{slowQuery("slow", 600)}</Suspense>
</ul>
);
}