Are there alternative approaches where the entire page doesn't need opted out of being a server component?

No expert at this, but I believe you can have server only forms - but then you can't demo the client hooks like useFormStatus and useFormState (not that these hooks have to be used with a server action). For a server-based form, instead of useFormState you would just call the server action function directly in the form's action attribute - but you can't do any user input in textboxes and such.

I'm not sure if another server (second) example makes sense for comparison? IE - Just call a server action from a server component page - and pass the resulting data down into a client component that displays it.

Just wanted to get things started on this cause I think it would have helped on our project if we had these examples.

I think one alternative is to have a separate component for the part that depends on the client-only hook. I think for most forms it's likely just the submit button, so it might be something like:

// components/SubmitButton.tsx
"use client";

function SubmitButton(props) {
  const { pending } = useFormStatus();

  return <button disabled={pending} type="submit">{props.label}</button>;
}

I think that would then allow the page to be a server component with a small client-side island.

@sawyerh this makes sense and we can try this - but we won't be able to demo useFormState without making the form (and text inputs) client components. I updated it to use a page but with a client form component with useFormState .

It can work with the form in a server component (with some eslint rules turned off (no-misused-promise). Lmk if we want multiple examples or something.

I think it would be helpful for the example to also demonstrate how to test the page, as well as render it in Storybook.

Can give tests and storybook a shot when we decide on how we want to construct these example(s)