Compteur à signaux (îlot)

Le serveur rend le compteur en HTML avec des marqueurs de reprise. Le runtime d'hydratation des signaux parcourt les marqueurs, lie chaque {count.value} à son nœud texte DOM et met à jour réactivement au clic — sans DOM virtuel, sans re-rendu du balisage environnant.

Astuce

Les signaux ne re-rendent que le nœud texte exact lié à la valeur — pas le composant entier. Contrairement à un îlot « use client », les éléments frères restent intacts. Passez plusieurs valeurs de signal à un seul composant : chacune se met à jour de façon indépendante.

Résultat

count: 7 (×2 = 14)

src/components/Counter.tsxTSX

"use signals";
/** @jsxImportSource @bext-stack/framework/signals */
import { signal, computed } from "@bext-stack/framework/signals";
export default function Counter(props: { initial?: number }) {
    const count = signal(props.initial ?? 0);
    const doubled = computed(() => count.value * 2);
    return (
        <div>
            <p>count: {count.value} (×2 = {doubled.value})</p>
            <button onClick={() => { count.value++; }}>+1</button>
            <button onClick={() => { count.value--; }}>−1</button>
        </div>
    );
}

src/app/examples/signals-counter/page.tsxTSX

import { signalsIsland } from "@bext-stack/framework/signals";
import Counter from "../../../components/Counter";
export default function Page() {
    return signalsIsland("Counter", Counter, { initial: 7 });
}

Compteur à signaux (îlot)

Résultat

Documentation associée