Sitemap
1 min readNov 18, 2023

--

This will NOT work correctly server-side, although it appears to work. In fact, it will cause your data to LEAK!

If your website has pages behind authentication, try this: Put something that's only accessible by authentication into a server-side Zustand store. Render it into a server-side component in a server-rendered page. Try accessing this page via two different users. If you put something specific to user 1, then load the page for user 2, you'll see that the data from user 1 has now leaked into the page shown for user 2.

Server-side components are meant to be stateless, and if you use Zustand as a hack to bring state into server, it's just going to maintain a global state that's shared between ALL authenticated users. If you have a thousand users, ALL of them will see what the last user put in the "state" inside server.

Note: You don’t need to have a user authentication system in your project to reproduce this. You can just have a simple way to store a piece of text you entered in the Zustand store (for example using searchParams), then a simple page that displays this data. (All of it should be server-side.) Then run this across multiple browsers, or even multiple devices and networks. Store a unique text on one client instance, then load the page everywhere. You should see it in all client instances. Store another unique text in another instance, and refresh all instances to see the new text.

--

--