Server - client components order
Answered
Jersey Wooly posted this in #help-forum
Jersey WoolyOP
Is it ok if I make a router.push to /admin for example and there I fetch data from database in a server component called layout.tsx with async functions and then from that page I return a client component that gets those data as interface props ? or how could I make this properly
Answered by B33fb0n3
then you can also use the functions:
revalidatePath or revalidateTag to only change the stuff on the page that changed. That happens without reloading the page. On the clientside you don't need to do anything. The two functions are server functions. Choose one of these functions and call it inside the function that updates your data12 Replies
@Jersey Wooly Is it ok if I make a router.push to /admin for example and there I fetch data from database in a server component called layout.tsx with async functions and then from that page I return a client component that gets those data as interface props ? or how could I make this properly
when you really need the route change, yea that's one option. If you just want to revalidate the data and the data is already loaded on the client, just use a clientside fetching library and revalidate your clientside data
Jersey WoolyOP
lets say i have a table with all users on that page /admin and if i modify a field from an user, role or something like that i wish i could see the change in the table , rn i use server client components and i have to reload the window to see the changes, any better idea ?
@Jersey Wooly lets say i have a table with all users on that page /admin and if i modify a field from an user, role or something like that i wish i could see the change in the table , rn i use server client components and i have to reload the window to see the changes, any better idea ?
how do you fetch the data right now? Inside the server component or inside the client component?
Jersey WoolyOP
inside the server, i call await functions in that component and return a client side component that gets those data in an interface props
@Jersey Wooly inside the server, i call await functions in that component and return a client side component that gets those data in an interface props
then you can also use the functions:
revalidatePath or revalidateTag to only change the stuff on the page that changed. That happens without reloading the page. On the clientside you don't need to do anything. The two functions are server functions. Choose one of these functions and call it inside the function that updates your dataAnswer
Jersey WoolyOP
ook, but on the server side i m using await functions to interogate the database, don't use api at all there
Jersey WoolyOP
wow, it worked really really nice, thank you so much 😀
sure thing
Jersey WoolyOP
i have a problem, it worked at first, but then it didn't work anymore, i just called revalidatePath('/admin') in route.ts that make the changes in database and it doesn t work anymore, any other ideas ?
Cape lion
Do your db fetches in your server component, pass your data to your client conponent. Use a server action to mutate your data in the client component and revalidatePath your admin route. This should work fine.
Jersey WoolyOP
it worked for me with router.refresh(), made the update instanly and id didn t refresh the entire page, thank you for your suggestions 👍 👍 👍