Is there a way to refresh a react server component without reloading the whole page?
Unanswered
House Wren posted this in #help-forum
House WrenOP
I have a dashboard with a table that opens a details pane on the right. The details pane is opened client-side and contains a server component (<Details />). The <Details /> component is an RSC that fetches its own data based on query params in the url (for example, ?id=123).
I want to be able to force a refresh on <Details /> (and only that component) when the user clicks on another entry in the table, changing the query params to another id (?id=321) so that I can get the details for that id.
Right now the only way I've been able to refresh this is by refreshing the whole page, but that's not ideal as It also refreshes (and shows the loading indicator) the left pane where the table is.
Thank you!
I want to be able to force a refresh on <Details /> (and only that component) when the user clicks on another entry in the table, changing the query params to another id (?id=321) so that I can get the details for that id.
Right now the only way I've been able to refresh this is by refreshing the whole page, but that's not ideal as It also refreshes (and shows the loading indicator) the left pane where the table is.
Thank you!
28 Replies
@Anay-208 use useState
House WrenOP
thanks! that's not really what I'm after, though I might need to refactor to have the <Details /> be a client component, I'm trying to figure out if there's a way to do what I described in the desc
House WrenOP
yeah, my <Details /> component (an RSC component) is looking at the query params to figure out wich
id to fetch details for@House Wren yeah, my <Details /> component (an RSC component) is looking at the query params to figure out wich `id` to fetch details for
you can use a useEffect hook for it. Like this
const [state, setState] = useState("paramval")
useEffect(() => {
// set param value, when a setState is triggered
}, [state])House WrenOP
that doesn't work on RSC components though
@House Wren that doesn't work on RSC components though
for this, you'll need a client component. You can render a client component using a server component
House WrenOP
yeah, that's what I'm trying to avoid, I wanna do server-side fetching
You can fetch it once on the server for query. once it changes, use client component to give a api call
House WrenOP
I can do all of this on the client, and fetch on the
id on the client, that'd all work. I'm trying to figure out if there's a way to do something similar to router.refresh() but of a specific RSC instead of the whole pageAt this moment i cant remember if there is a good way to do this(its late at night).
What you'll need to do is use a client component and as for server side fetching, you can still use Server Actions
What you'll need to do is use a client component and as for server side fetching, you can still use Server Actions
House WrenOP
yeah, thought about that too (using server actions) to fetch the data, it feels weird though, they are advertised as mutation functions not data fetching functions lol
@House Wren I can do all of this on the client, and fetch on the `id` on the client, that'd all work. I'm trying to figure out if there's a way to do something similar to `router.refresh()` but of a specific RSC instead of the whole page
Maybe you can use <Link href="thisurlwithquery"/>. not sure if its a efficient way
@Anay-208 Maybe you can use <Link href="thisurlwithquery"/>. not sure if its a efficient way
House WrenOP
that'd only work with intercepted parallel routes, which I initially used, but it's really buggy when it comes to refreshing them
@House Wren that'd only work with intercepted parallel routes, which I initially used, but it's really buggy when it comes to refreshing them
the best option would be to give a api call whenever id changes
and fetch it
thats what I'd do.
if you use router.refresh, the frontend will do the same thing
give a api call
House WrenOP
yeah, I might need to take that route, didn't want to give up on the RSC without looking into it
mark my message as a solution
@House Wren yeah, thought about that too (using server actions) to fetch the data, it feels weird though, they are advertised as mutation functions not data fetching functions lol
Server Actions don't really need to do data mutations. If you really want to then you can use a Route Handler too. That also runs on the server
@House Wren I have a dashboard with a table that opens a details pane on the right. The details pane is opened client-side and contains a server component (<Details />). The <Details /> component is an RSC that fetches its own data based on query params in the url (for example, ?id=123).
I want to be able to force a refresh on <Details /> (and only that component) when the user clicks on another entry in the table, changing the query params to another id (?id=321) so that I can get the details for that id.
Right now the only way I've been able to refresh this is by refreshing the whole page, but that's not ideal as It also refreshes (and shows the loading indicator) the left pane where the table is.
Thank you!
Oh btw I haven't tried this myself but i think the searchParams prop on the page changes if the url changes.
Try creating a client component inside your server component that changes the search params and then use the searchParams prop in your server component
Try creating a client component inside your server component that changes the search params and then use the searchParams prop in your server component
House WrenOP
yeah that'd work but that'll also refresh the whole page which is what I'm trying to avoid 😦
House WrenOP
just in case, relivadateTag only seems to work with fetch, I'm using prisma and querying the DB directly from my RSC
use revalidatePath()
its not dependent on fetch and can be used on prisma calls.
its not dependent on fetch and can be used on prisma calls.