Pinia localstorage Hydration Issues
hey guys, I am currently using pinia and the pinia-plugin-persisted-state plugin to store values from my pinia store. Originally I was using cookies but the size of the store got too large to be stored that way. I switched over to using localstorage and whenever I refresh the page, I get tons of hydration errors because localstorage isnt available on the server. I am able to resolve this by wrapping most of the app in <ClientOnly> but I am wondering what other solutions are there to resolving this problem?
9 Replies
I think it would help a bit if you would share the role of LocalStorage in your project. Does it store primary data (e.g. tasks in a todo app)? shopping cart? profile settings (e.g locale settings, dark mode)? is it cache or the actual data store?
I am creating a wordle clone so its used to store the users stats, their guesses, the correct answer and stuff like that
And what advantage has SSR over making it fully SPA?
honestly I'm not sure. I was thinking of that myself and I just assumed since nuxt had so many ssr features enabled that I should be trying to use them
SSR is generally for SEO or content-heavy wikis (if one can utilize nuxt-island's). You can easily appoint specific endpoint to be SSR-ed (like home page or /about) and leave the rest to be SPA.
It would eliminate the need for
<client-only>where do I specify this. I think I saw mention of it earlier while looking through the docs but I dont remember exactly where I saw it
I remember mostly this video
that worked. Very similiar to the clientOnly approach I was using earlier since I was wrapping parts of the layout in ClientOnly and those parts were the same routes I just setup the rules for. This feels less messy though
thanks
Happy to help 🙂 Take care