Navigation côté client (SPA)

Tout ce site utilise désormais le routeur client intégré de bext. Cliquez sur n'importe quel lien de la barre latérale : le contenu (<main>) est remplacé sans rechargement complet, l'URL et l'historique se mettent à jour, et la transition passe par l'API View Transitions. La barre latérale, l'en-tête et le pied de page (hors <main>) persistent.

Astuce
Ouvrez l'onglet Réseau et naviguez : pas de rechargement de document, juste un petit fetch HTML par page (préchargé au survol). Les îlots se re-montent et la coloration se ré-applique via l'événement « bext:navigated ». C'est un script de ~2 Ko, opt-in dans votre layout.

Ce que le routeur fait

  • Soft-nav : interception des liens, fetch HTML, remplacement de <main>, pushState.
  • Préchargement au survol (link rel=prefetch) — la page est déjà là au clic.
  • View Transitions natives autour de chaque échange.
  • Persistance : la barre latérale / l'en-tête / le pied restent montés.
  • Re-exécution des scripts d'îlots + événement « bext:navigated » pour le contenu.
  • Repli automatique en navigation dure pour les pages à hydratation complète.

Activation (dans votre layout)

layout.tsxTSX
import { clientRuntimeBody } from "@bext-stack/framework/client";

// In your root layout <body>, once:
<script dangerouslySetInnerHTML={{ __html:
  clientRuntimeBody({ navigation: true, viewTransitions: true })
}} />

// That ~2KB script intercepts same-origin <a> clicks, fetches the page,
// swaps <main> (sidebar/nav/footer outside it persist), updates history,
// and wraps the swap in a View Transition. It prefetches on hover, and
// re-runs island + content scripts after each swap.

// Content scripts (highlighting, charts) re-init on the lifecycle event:
document.addEventListener("bext:navigated", () => rehighlight());