Next.js pre-renders every page on the server.
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance,
instead of having it all done by client-side JavaScript.
Pre-rendering can result in better performance and SEO.(…) When a
page is loaded by the browser, its JavaScript code runs and makes the
page fully interactive (this process is called hydration in React).— Next.js, Building Your Application, Rendering
The hydration issue occurs because the HTML rendered on the browser doesn’t match the one generated on the server. In your case this is because cook.get("key") returns different things in both.
There are a couple of options to solve the issue.
#1 Moving setting state to useEffect
The first solution is to move setting the state inside a useEffect. This forces the state to only be set on the client-side, so no mismatches will occur.
export default function Home() {
const cook = new Cookies();
const [session, setSession] = useState();
// `setCookie` and `deleteCookie` code here
useEffect(() => {
setSession(cook.get("key"));
}, []);
return (
<div className={styles.container}>
<button onClick={() => setCookie()}>Save Cookie</button>
<button onClick={() => deleteCookie()}>Delete Cookie</button>
{session ? <>I'm in</> : <>I'm out</>}
</div>
);
}
#2 Using next/dynamic with { ssr: false }
As an alternate solution, the issue can also be circumvented by dynamically importing the React component with next/dynamic using { ssr: false }, wherever the component is used. This prevents the component from being included on the server, and dynamically loads it on the client-side only.
const Home = dynamic(
() => import('../components/Home'),
{ ssr: false }
)