Interface optimiste
L'interface se met à jour avant la confirmation du serveur — le clic semble instantané, et un réseau lent n'importe que si la requête échoue. En cas d'erreur, on revient à la valeur d'avant le clic. L'API ici renvoie 500 dans ~14 % des cas pour que vous puissiez voir le chemin de retour : cliquez suffisamment de fois et un +1 optimiste disparaît.
Astuce
Stockez toujours la valeur pre-clic avant de muter l'état — c'est votre seule chance de revenir en arrière. Réconciliez avec la valeur authoritative du serveur en cas de succès (pas juste +1) pour éviter la dérive si d'autres clients mutent la même ressource.
Essayez
40
in sync
// 1. Bump optimistically — UI flips before the network call.
// 2. Fire the request.
// 3a. Success: reconcile to the server's authoritative value.
// 3b. Failure: roll back to the pre-click value, surface the error.
const onLike = async () => {
const before = state.value.count;
state.value = { ...state.value, count: before + 1, pending: true };
try {
const r = await fetch("/api/likes", { method: "POST" });
if (!r.ok) throw new Error("HTTP " + r.status);
const data = await r.json();
state.value = { ...state.value, count: data.count, pending: false };
} catch (e) {
state.value = { ...state.value, count: before, pending: false, err: String(e) };
}
};