Ship real HTML.
Hydrate on purpose.

1// A page is an async function. Fetch on the server, render on the server.
2import { Island } from "@bgunnarsson/binsby-islands/server"
3import { db } from "~/lib/db.server"
4
5export default async function Product({ slug }: { slug: string }) {
6  const product = await db.product.findBySlug(slug)
7
8  return (
9    <article>
10     <h1>{product.name}</h1>
11     <p>{product.description}</p>
12
13     {/* the only piece of this page that ships JS */}
14     <Island name="AddToCart" props={{ id: product.id }} when={{ type: 'visible' }} />
15   </article>
16 )
17}

1// .island.tsx — runs in the browser. Pulls in only what it imports.
2import { useState } from "react"
3import { addToCart } from "./cart.action"
4
5export default function AddToCart({ id }: { id: string }) {
6  const [pending, setPending] = useState(false)
7
8  async function onClick() {
9    setPending(true)
10   await addToCart({ id, qty: 1 })    // typed call → server action
11   setPending(false)
12 }
13
14 return <button onClick={onClick} disabled={pending}>Add to cart</button>
15}

1// .action.ts — runs on the server, callable from islands as a typed function.
2import { defineAction } from "@bgunnarsson/binsby-actions/server"
3import { z } from "zod"
4import { cart } from "~/lib/cart.server"
5
6const Input = z.object({ id: z.string(), qty: z.number().int().min(1) })
7
8export const addToCart = defineAction({
9  id: "cart.add",
10 input: { parse: (raw) => Input.parse(raw) },
11 async handler({ ctx, input }) {
12   await cart.add(ctx, input.id, input.qty)
13   return { ok: true }
14 },
15})