How to safely use SSR, Zustand, and Local Storage together?

[nikbobo]

I am a rookie engineer who has only worked with CSR applications before. Now, due to certain reasons, I need to implement SSR for my application.

Consider the following scenario: (This is how I used to do it in CSR)

1. Create a User Store to store user data.
2. When this data changes, it is automatically serialized to Local Storage.
3. When the user refreshes the page or closes and reopens it, the data is restored from Local Storage to the screen.

After switching to SSR, what changes should be made to ensure the data can be used as safely as it was in CSR? For example, how can I avoid "data sharing on the server" (sorry, I don’t quite understand this) leading to user data leakage?

Lastly, I have already read the SSR and Next.js documentation for Zustand, but I’m still confused. Could you provide me with a simple and secure example based on this?

[dbritto-dev]

@nikbobo we talked about that in SSR and Hydration, and Nextjs guides. I encourage you to read those guides. BTW, ping me if you have any questions.

[nikbobo]

I found the Next.js repository has a good example for me.

[MonstraG]

@nikbobo, please link the the example)