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

[phatify]

This error happen when page component not provide getInitialProps/getServerSideProps/getStaticProps.

Example:

case working:

const Page1 = () => {...}
export const getServerSideProps = () => {...}

case not working:

const Page2 = () => {...}

[bjoluc]

Hi @phatify,

this may be expected behavior in case your render results depend on cookie state (otherwise, please let me know): Without getInitialProps or getServerSideProps, your page is statically rendered at build time. If you render it again on the client, state from the client's cookies affects the render result, causing the hydration to fail. getServerSideProps ensures that the initial server-rendered page matches what will be rendered on the client.

Closing the issue, but feel free to post here again if anything looks odd.