I’m working with Next.js App Router and trying to figure out a pattern for this workflow:

When a user clicks a button, I want to:

Fetch some data from the database (server-side)

Render a Server Component using that data

Send the rendered result back to the client and display it — without doing a full page reload

Basically:

Client triggers → Server fetch + render → Client shows rendered result

I know Server Components can’t directly be called from the client, so I’m wondering what the right approach is here. Should I:

Use a Server Action that returns JSX (if that’s even possible)?

Or maybe call an API route / server action that returns the data and then hydrate a Client Component?

Or is there some hybrid pattern for this scenario?

Would love to hear how others are handling this kind of “on-demand server render” pattern 🙏