search

astoilkov / use-local-storage-state

React hook that persists data in localStorage
MIT License
1.1k stars 41 forks source link

Unable to access data stored on localstorage on NextJS after reloading the page #21

Closed Luccasoli closed 3 years ago

Luccasoli commented 3 years ago

The problem only happens in the nextjs project on my machine (in the codesandbox only a warning appears on the console)

image

a minimal example of the problem, but as I said, in the codesandbox it only generates a warning, but in the project on localhost this photo error appears: https://codesandbox.io/s/loving-thompson-dlx6j?file=/pages/index.js

Edit: now that i understand the reason for just being a warning in condesandbox, i am using optional chaining ..., but the problem is still simulable, even if there is a value in localstorage it is inaccessible after a reload on the page

astoilkov commented 3 years ago

Let me explain why this happens. When running the code on the server useValue() returns undefined but when run on the client the useValue() returns the value from the local storage. The server returns undefined because it doesn't have the localStorage available.

I am not sure if this can be improved or fixed. I will think about it.

If any other user seeing this has any ideas please share them. What other packages do in the same situation?

astoilkov commented 3 years ago

From what I can see here it seems the only option is to exclude this component from SSR rendering. This is because there is no way to access the localStorage on the server.

P.S. I am wondering if it would be a good idea to write this in the docs.

Luccasoli commented 3 years ago

Let me explain why this happens. When running the code on the server useValue() returns undefined but when run on the client the useValue() returns the value from the local storage. The server returns undefined because it doesn't have the localStorage available.

I am not sure if this can be improved or fixed. I will think about it.

If any other user seeing this has any ideas please share them. What other packages do in the same situation?

I could understand your explanation, I am now doing my first project with nextjs and it was nice to know that he does this first execution on the back-end node,

I also do not know of other solutions that can do some management while running on the backend (and I also think that there is no way ...)

I think I will follow your suggestion and try to use dynamic import with SSR disabled, I believe it should solve my problem, thanks !!

(And sorry for the delay, yesterday I was a little sick, and I spent the day at the doctor's appointment, exam, and recovering xD)

astoilkov commented 3 years ago

@Luccasoli I am glad I helped you get a deeper understanding.

I hope you are feeling much better today. 🤞

astoilkov commented 3 years ago

I am closing this issue in favor of https://github.com/astoilkov/use-local-storage-state/issues/23 because the discussion there started getting to the root cause and started discussing solutions. @Luccasoli You are welcome to subscribe and join it.