RevalidatePath with SWR
Answered
Minskin posted this in #help-forum
MinskinOP
hey guys, im using SWR on my client side components to fetch data from my server. When i trigger server side actions, it looks like revalidatePath, does not actually trigger swr to also refetch its data. Is there a workaround for that?
Answered by B33fb0n3
that's correct. Even with other libraries like react query, they don't refetch. When the clientside data is revalidated is part of the client (because it's clientside data). So you can revalidate specific caches, after your server action is executed. I like to do it like this (see attached):
1. Red: the server action itself
2. Green: Only revalidate the data when the server action was successful
3. Orange: Revalidate the specific part of data inside my app
You can (and should) do the same
1. Red: the server action itself
2. Green: Only revalidate the data when the server action was successful
3. Orange: Revalidate the specific part of data inside my app
You can (and should) do the same
18 Replies
@Minskin hey guys, im using SWR on my client side components to fetch data from my server. When i trigger server side actions, it looks like revalidatePath, does not actually trigger swr to also refetch its data. Is there a workaround for that?
that's correct. Even with other libraries like react query, they don't refetch. When the clientside data is revalidated is part of the client (because it's clientside data). So you can revalidate specific caches, after your server action is executed. I like to do it like this (see attached):
1. Red: the server action itself
2. Green: Only revalidate the data when the server action was successful
3. Orange: Revalidate the specific part of data inside my app
You can (and should) do the same
1. Red: the server action itself
2. Green: Only revalidate the data when the server action was successful
3. Orange: Revalidate the specific part of data inside my app
You can (and should) do the same
Answer
MinskinOP
i see
one of my ideas was, to use server actions as a fetcher for swr, because i use a thrid party backend with nextjs, and dont want the client to directly communicate with it, but have my next server as a middleman. Would that work as well? As i see you use next safe action as well, so did you ever try that?
@Minskin one of my ideas was, to use server actions as a fetcher for swr, because i use a thrid party backend with nextjs, and dont want the client to directly communicate with it, but have my next server as a middleman. Would that work as well? As i see you use next safe action as well, so did you ever try that?
Would that work as well?that would work, yes. However you have some disadvantages for fetching data via server actions. Server actions are made for clientside mutations. Not for clientside fetching. Technically, it's possible. You should prefer fetching data serverside and pass them as props to the client.
As i see you use next safe action as well, so did you ever try that?Yea, as you can see in my provided screenshot I using it for clientside mutations. I also done it at the beginning, that I fetched data with server actions. After some time the disadvantages were way bigger than the easy handling of the server actions. Now I either fetch via server and pass the data down to the client or using traditional api routes
MinskinOP
Yes that would be ideal, the only "problem" im facing, ist that im using NextUI for my components, and i havent figures it out yet, how not to make everything a client component when wrapping with the provider
@Minskin Yes that would be ideal, the only "problem" im facing, ist that im using NextUI for my components, and i havent figures it out yet, how not to make everything a client component when wrapping with the provider
It seems like you can easily integrate specific component into your serverside code: https://nextui.org/docs/frameworks/nextjs#use-nextui-components
That's because [nextui builds on top of tailwind css](https://nextui.org/docs/frameworks/nextjs#tailwind-css-setup). so there shouldn't be a problem in fetching the data serverside and passing it down to your components
That's because [nextui builds on top of tailwind css](https://nextui.org/docs/frameworks/nextjs#tailwind-css-setup). so there shouldn't be a problem in fetching the data serverside and passing it down to your components
This my problem
@Minskin https://nextui.org/docs/frameworks/nextjs#add-provider-to-root
why? Just add the provider to the root. The children will stay server components
It's a typical pattern to wrap something in client components, but keep stuff serverside rendered: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
MinskinOP
Exactly, but the NextUI Provider is a client side component
Or do the providers nothing have to with that? Im sorry for the stupid questions, kind of new to all of this :D
@Minskin Or do the providers nothing have to with that? Im sorry for the stupid questions, kind of new to all of this :D
They will stay server components, when you pass them as children. You can see that here: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props
MinskinOP
That is good to know, thanks for the help
Is your initial issue solved like that?
MinskinOP
Yes should be, i just have to rebuild my project a bit, but should be easy
happy to help