Server action form

PRISM exports a loader (runs on GET) and an action (runs on POST). After a successful action, PRISM reruns the loader so the page renders with fresh data — Remix-style.

Output

count: 0

Source

// src/app/examples/server-action-form/page.tsx
         const __state = (globalThis as any).__demoCounter ??= { count: 0, lastNote: null };

    export async function loader() {
                    return { count: __state.count, lastNote: __state.lastNote };
    }
    export async function action({ request }: ActionArgs) {
                const form = await request.formData();
                const op = String(form.get("op") ?? "");
                if (op === "inc") __state.count++;
                if (op === "dec") __state.count--;
                if (op === "reset") __state.count = 0;
                return { ok: true, op };
    }
    export default function Page({ data, actionData }) {
                    return (
                                    <form method="post">
                                                    <p>count: {data.count}</p>
                                                    <button type="submit" name="op" value="inc">+1</button>
                                                    <button type="submit" name="op" value="dec">−1</button>
                                    </form>
                    );
    }