Refactor a page marked entirely `use client` into server and client responsibilities.

• Do not pass database clients or functions as props.
• Keep secrets server-side.
• Use serializable props.
• Authorize mutations on the server.

I place use client at the smallest interactive leaf. The server component owns data access and rendering; the button owns transient interaction.

export default async function DrillPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const drill = await loadAuthorizedDrill(slug);
  return <main>
    <h1>{drill.title}</h1>
    <article>{drill.answer}</article>
    <FavoriteButton drillId={drill.id} initialFavorite={drill.isFavorite} />
  </main>;
}

// FavoriteButton.tsx
"use client";
import { updateFavoriteAction } from "./actions";
export function FavoriteButton(props: { drillId: string; initialFavorite: boolean }) {
  const [favorite, setFavorite] = useState(props.initialFavorite);
  const [pending, setPending] = useState(false);
  async function toggle() {
    const previous = favorite;
    const next = !previous;
    setFavorite(next);
    setPending(true);
    try { await updateFavoriteAction(props.drillId, next); }
    catch { setFavorite(previous); }
    finally { setPending(false); }
  }
  return <button aria-pressed={favorite} disabled={pending} onClick={toggle}>
    {favorite ? "Remove favorite" : "Add favorite"}
  </button>;
}

// actions.ts
"use server";
export async function updateFavoriteAction(drillId: string, favorite: boolean) {
  const user = await requireCurrentUser();
  await requireCapability(user, "practice.write.own");
  await saveFavorite(user.id, drillId, favorite);
}

The client bundle excludes page data-loading code and large static answer content. The small client leaf persists through an authorized server action and rolls back a failed optimistic change.

• The drill is not found.
• User-specific favorite differs by session.
• Props are non-serializable.
• Mutation fails.

• Inspect client bundle boundary.
• Assert server authorization.
• Test button behavior separately.

• Marking the whole page client-side.
• Passing secrets in props.
• Assuming hidden UI is authorization.
• Duplicating server data fetch in an effect.