Where should the client boundary go in a Next.js page that fetches database data?

Keep the page as a Server Component and make the filter a Client Component.

// app/questions/page.tsx
import { db } from "@/lib/db";
import QuestionFilter from "./question-filter";

export default async function Page() {
  const items = await db.question.findMany({
    select: { id: true, title: true },
    take: 20,
  });
  return <QuestionFilter items={items} />;
}

The filter module starts with "use client" and can use state. Its imports belong to the client module graph, so never import the database client there. Pass only necessary React-serializable fields, never secrets or unrestricted user records. This filter searches only the supplied rows; searching the complete dataset requires a server query.

Reference: Next.js component boundaries.

AI-assisted DevCircle editorial explanation. Corrections and alternative solutions are welcome.