Error: Hydration failed because the initial UI does not match what was rendered on the server

[Mike Reilley]

I believe I followed all instructions correctly, but the cookie data is undefined by the time my component renders on the client. Here's a quick overview of what I'm doing. I'm using the App router, and I have a cookie that get sets through an API route on a sign in page. Then I go back to the Home page of the site and I'm wanting to check the cookie to see if it's expired from my Navbar component. As I'm sure you guessed, I'm going to use the active cookie as a flag for whether the user is logged in or not, then update the UI as needed (ex., the Navbar will show "Sign In" if the cookie is expired).

In the Navbar component, I'm attempting to inject the cookie data into the jsx just so I can see it's there, much like your example in the Github instructions. When the page loads, for a split second I see the cookie appear, then it disappears and an error is displayed, which I'll show in a moment. Also, through logging I can see that the cookie is getting retrieved server side, it's showing in the terminal, but it's not getting retrieved client side, as it's undefined in the browser console.

The cookie is getting retrieved at least on the server, so I know something's working. I'm new to NextJS development, so I'm not understanding what's going wrong here. Here's the error getting displayed:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Did not expect server HTML to contain the text node "eifjlspapeIEFhjfiels9eksghels3ahhnilk.eyJzZXNzaW9uVG9rZW4iOiJyOjllYmQ5OGM1YjAxZDhiMWZjNTc4ODczNzAxMWVkM2NkIiwiaWF0IjoxNjk4ODU1NTc4LCJleHAiOjE2OTg4NTYxNzh9.se8x2ovczG_0tA9nujZrxX7puE5UokTsyTH_aIx-_JE" in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
div
div
nav
Navbar
./app/components/Navbar.tsx (18:84)
main

[Moshe Simantov]

It's hard to understand what's wrong without a live example. It's possible that you're setting the cookie in the server with a specific domain that only available on the server side but not on the client side?

You can check on your browser Inspect tab if you can see the cookie and then try to understand why it's not available via the JS code. It's probably related to some flag like Secure or HttpOnly. Most chances this issue is not related to this library as we are using js-cookie for fetching the cookies on the client.

[Mike Reilley]

Thank you for responding. I'm now understanding the problem. I'm new to working with cookies and NextJS, so this whole process has been somewhat confusing. The issue is the cookie is flagged as "HttpOnly," and I was unaware exactly what that meant. I knew it kept cross-scripting attempts from getting hold of the cookie data, but I didn't get that it kept any local scripts from retrieving the cookie. You're answer pointed me to finding more information about "HttpOnly," so thank you very much.