Example of NextJS 13 with Zustand 4.3.3 (SSR, CSR)

[hiroyukinuri]

I created an example on how to use Zustand 4.3.3 with NextJS 13.1.1 while still using the context provider and slice features, I don't know if this example covers all rendering cases but it seems to be working well for SSR & CSR.

https://stackblitz.com/edit/nextjs-zy4agp?file=pages%2Findex.tsx

Would love to get feedback and know how this implementation could be further improved.

[desiboli]

@hiroyukinuri any idea on how to use the store using the Next.js 13 app directory ? How to set and get states in SSR components ?

[CanRau]

I made a component which is in a "use client;" file which I can use from within a server component and pass in props which then get set on the client

This doesn't give any errors tho the app freezes completely on pages where I put this component

export function SetBackgroundContext({ nav, footer, page }: { nav?: NavColor; footer?: FooterColor; page: string }) {
	const [setNav, setFooter] = useBackgroundColorStore((state) => [state.setNav, state.setFooter]);

	useEffect(() => {
		if (nav) setNav(nav);
		if (footer) setFooter(footer);
	}, [nav, footer, setNav, setFooter, page]);

	return null;
}

Also tried setting state within useTransition as that's what my Context implementation is using but it's still freezing 🤷🏼

[JoaquinFrontendDev]

I created an example on how to use Zustand 4.3.3 with NextJS 13.1.1 while still using the context provider and slice features, I don't know if this example covers all rendering cases but it seems to be working well for SSR & CSR.

https://stackblitz.com/edit/nextjs-zy4agp?file=pages%2Findex.tsx

Would love to get feedback and know how this implementation could be further improved.

Hey, here's a tough one @hiroyukinuri , I applied your solution to hydrate the Zustand store from getServerSideProps and it worked great, but my big problem now is the tests, for some reason when the snapshot is taken, it doesn't reflect correctly the information it should have (labels, links, placeholders, etc).
Am I skipping a step or is there a solution for this?

[dbritto-dev]

@JoaquinFrontendDev would you mind sharing us a minimal repro on stackblitz? btw, now we have two guides one for ssr and hydration and one for nextjs