Nextjs, SSR Layout and Zustand... misusage?
Unanswered
Northern Pintail posted this in #help-forum
Northern PintailOP
I have a Zustand store in my
I have a use case that I should refresh account details, specially when the user goes into a
So far, my solution was to pass
Are there any good examples on Zustand usage on server components (in this case, a layout component) out there? I'm trying to debug, but it's causing me a headache.
Here I added an example:
https://github.com/rferromoreno/zustand-ssr-example
Instructions: Clone,
I just realize I cannot revalidatePath on components since I'm getting a warning with latest nextjs version. But code is still situable for sharing my issue, I guess
layout.tsx for logged in users, storing the user account details. I'm fetching this account details (fetchAccountDetails()) that are initial values for the context provider.I have a use case that I should refresh account details, specially when the user goes into a
/my-account page.So far, my solution was to pass
{ cache: 'no-store' } in the fetchAccountDetails() call. I also added a revalidatePath('/', 'layout');. However, there are things that seems to be not working as expected.Are there any good examples on Zustand usage on server components (in this case, a layout component) out there? I'm trying to debug, but it's causing me a headache.
fetchAccountDetails() seems to be bringing the latest data, but sometimes it seems that store is not updating with the new values.Here I added an example:
https://github.com/rferromoreno/zustand-ssr-example
Instructions: Clone,
npm run dev, and then click between "Home" and "My account" on nav links.I just realize I cannot revalidatePath on components since I'm getting a warning with latest nextjs version. But code is still situable for sharing my issue, I guess
2 Replies
Boerboel
So one way i would do it is using tanstack query so instead of zustand you can simply cache the user object in memory then resue it by calling the same key, also for /my-account you can just do a useEffect and use the hook to invalidateQuery on initial dependecy []
@Boerboel So one way i would do it is using tanstack query so instead of zustand you can simply cache the user object in memory then resue it by calling the same key, also for /my-account you can just do a useEffect and use the hook to invalidateQuery on initial dependecy []
Northern PintailOP
Is there any way, other than using tanstack query or using a client component?