Counter

One button is a server action (a method reference — it round-trips over the socket, runs on the server, patches the DOM back). The others are client expressions (arrow functions — they update the browser instantly). You write the difference exactly as you would in React.

Turns orange past 5 — via a reactive class binding, no round-trip.

The server has processed 0 server-action bumps. Client-only changes never reach it — until your next server action flushes them, where the server reconciles and stays authoritative.

@expose count = 0;

@expose increment() {   // a server action — round-trips, patches back
  this.count++;
}

// server action (method reference)
<button onClick={this.increment} loadingAttr="disabled">+ Server</button>
// client expressions (arrow fns) — instant, no round-trip
<button onClick={() => this.count++}>+ Client</button>
<button onClick={() => this.count--}>− Client</button>
// reactive text + class, client-side
<p text={this.count} class={this.count > 5 ? "text-orange-600" : ""} />