Reprise : données asynchrones

Le loader de page récupère les données initiales côté serveur ; elles atterrissent dans un signal, se sérialisent et reprennent sur le client — la liste s'affiche sans que le composant s'exécute. Le bouton Rafraîchir est un gestionnaire async qui await fetch() : il est lifté tel quel, donc au clic il recharge les données et met à jour le signal, toujours sans ré-exécuter le composant.

Astuce

La liste ci-dessous est rendue côté serveur puis reprise (aucune exécution du composant au chargement). Cliquez « Rafraîchir » — le gestionnaire async récupère de nouvelles données depuis /api/resumable-feed et le compteur + la liste se mettent à jour. Chaque fetch renvoie un numéro croissant pour prouver l'aller-retour réseau.

Démo en direct

3 items · server (SSR)

• Server-rendered item 1 • Server-rendered item 2 • Server-rendered item 3

Feed.tsxTSX

"use resumable";
import { signal } from "@bext-stack/framework/signals";

// The page loader fetches the initial data and passes it as props →
// it lands in a signal, serializes into the island, and RESUMES on the
// client (the component never runs).
export default function Feed(props) {
  const items = signal(props.items ?? []);
  return (
    <div>
      {/* an ASYNC handler — lifts verbatim into __rh, awaits fetch on the
          client, and updates the signal. No component re-run. */}
      <button onClick={async () => {
        const r = await fetch("/api/resumable-feed");
        items.value = (await r.json()).items;
      }}>Refresh</button>
      <div>{items.value.length} items</div>
    </div>
  );
}