Trigger Server Component on Button Click (Fetch + Render Server-Side)
Unanswered
Bombay posted this in #help-forum
BombayOP
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:
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 🙏
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 🙏
10 Replies
@Bombay 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 🙏
on click, update search params, which will hit the same endpoint but browser will "merge" changes in the dom so that it updates content without refreshing the whole page
BombayOP
thanks bro, but i like to show server-rendered component inside a dialog or sheet
@Bombay thanks bro, but i like to show server-rendered component inside a dialog or sheet
yes yes you can show server-rendered component inside a dialog or sheet with the method i described
"dialog" or "sheet" is just "content"
BombayOP
how?
need: when user click on button then load server-component (this component load data form db), this component show in dialog
Pacific sand lance
if nothing changed, you can render and return stuff directly in server actions
@Bombay need: when user click on button then load server-component (this component load data form db), this component show in dialog
when user click on Button, redirects to ?dialog=open
with js-enabled, this calls the same endpoint but now you have <Dialog> that listen to changes in search params and open up the dialog when the
you can do neat stuff like
with js-enabled, this calls the same endpoint but now you have <Dialog> that listen to changes in search params and open up the dialog when the
dialog sp === "open".you can do neat stuff like
<Dialog> // only show if ?dialog=open
<LoadServerComponentFromDB />
</Dialog>BombayOP
in this example page will regenerate everytime when param is generated or resue existing page
@Bombay 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 🙏
Milkfish
Well, you have a few options.
1. Fetch on client. That's what I recommend. Just fetch the data on the client, only when the button is clicked by calling the endpoint and getting ur data response. This is useful for this like popup dialogs.
2. Fetch on server component. This can also work using the search params method the other guy mentioned. But my issue with this is that you'll end up re-fetching data you already have just to display an additional data. Also, if you wanna display the data in a dialog and you wanna add a loading state when the button is clicked, it might be tricky using this method.
3. Pre-fetch the data. Just fetch it on page load and display it when the button is clicked. Easy. But you might be fetching unnecessary data especially if the button isn't clicked often. And if it's something like a transaction page with lots of rows, fetching additional info and just putting them in the background would be bad for performance.
4. Um, pls don't fetch with server action. Its not recommended for data fetching. Best for mutations tho.
So I recommend either client side data fetching or you just use search params.
1. Fetch on client. That's what I recommend. Just fetch the data on the client, only when the button is clicked by calling the endpoint and getting ur data response. This is useful for this like popup dialogs.
2. Fetch on server component. This can also work using the search params method the other guy mentioned. But my issue with this is that you'll end up re-fetching data you already have just to display an additional data. Also, if you wanna display the data in a dialog and you wanna add a loading state when the button is clicked, it might be tricky using this method.
3. Pre-fetch the data. Just fetch it on page load and display it when the button is clicked. Easy. But you might be fetching unnecessary data especially if the button isn't clicked often. And if it's something like a transaction page with lots of rows, fetching additional info and just putting them in the background would be bad for performance.
4. Um, pls don't fetch with server action. Its not recommended for data fetching. Best for mutations tho.
So I recommend either client side data fetching or you just use search params.