Lazy island hydration

A signals island can defer its hydration off the critical path. The server-rendered HTML is visually interactive right away; the runtime only attaches reactive bindings when it pays to — "visible" (when scrolled into view), "idle" (requestIdleCallback) or "interaction" (first pointer / key / focus). With no opts.lazy, the island hydrates eagerly — the default behavior is unchanged.

Tip

This is the practical slice of "resumability": you move hydration time off the time-to-interactive path. The markup is already there (server-rendered), so the island shows instantly; only the reactive wiring waits. Eager by default → no existing island is affected; opt in per island via opts.lazy.

Output

Eager (default) — hydrated on load.

Idle — hydrated inside a requestIdleCallback, after first paint.

Interaction — hydrated on first pointer / key / focus.

Scroll down… ↓

Visible — hydrated when scrolled into view (IntersectionObserver). The counter above only wired up the moment you scrolled it on-screen.

API: signalsIsland(name, Component, props, opts?) where opts.lazy ∈ "visible" | "idle" | "interaction". Absent = eager.

src/app/examples/lazy-hydration/page.tsxTSX

import { signalsIsland } from "@bext-stack/framework/signals";
import Counter from "../../../components/Counter";

export default function Page() {
  return (
    <div>
      {/* eager — hydrates on load (default, no opts) */}
      {signalsIsland("Counter", Counter, { initial: 1 })}

      {/* idle — hydrates in a requestIdleCallback, off the critical path */}
      {signalsIsland("Counter", Counter, { initial: 4 }, { lazy: "idle" })}

      {/* interaction — hydrates on first pointer / key / focus on the island */}
      {signalsIsland("Counter", Counter, { initial: 3 }, { lazy: "interaction" })}

      <div style="margin-top:120vh">
        {/* visible — hydrates when scrolled into view (IntersectionObserver) */}
        {signalsIsland("Counter", Counter, { initial: 2 }, { lazy: "visible" })}
      </div>
    </div>
  );
}