Problem of hydration from the cookie data

[juliengueperoux]

Hi,

I am facing an issue on a personal project. I am calling an API to have my data into getServerSideProps in the index.tsx. My goal is to save the data into a cookie so that I wouldn't have to call the API each time the user reload the page.

Thing is, I am all the time facing this error on page load : Error: Hydration failed because the initial UI does not match what was rendered on the server.

It is like the data retrieved from the api call was cleaned and deleted from the store after page load on the SSR... I mean, the hydration from the data received during SSR are not set in the CSR store

I am new to Nextjs and I would love to have your help :)

package.json

store.ts

index.tsx

fishesSlice.ts

[bjoluc]

Hi @juliengueperoux,

I'm glad to see you seem to have solved your problem.

My goal is to save the data into a cookie so that I wouldn't have to call the API each time the user reload the page.

This sounds like a perfect fit for getStaticProps: If you dispatch setFishes there, next-redux-wrapper will hydrate your client store with the fishes and the API will only be called at build time (or when regenerating) – no need to store fishes in a cookie then.