francesco-lanciana / gatsby-hydration-issue Goto Github PK

When Gatsby builds it server side renders the site. When doing so certain things may not be defined, for example window.

Let's say I have a variable that is true if the window exists, and false otherwise. This variable is then used to set the value of a data attribute, e.g. <div data-attribute={variable} />. In this case when Gatsby builds the site it will set the attribute to false as it should since window is not defined at this point. However when we load the site in the browser and the component is executed, we would expect the value to now be true since the window now exists. In this case Gatsby seems to ignore the new value... I don't know why, but I will!!

To see the issue in practice run: npm run develop

You should see that the text is green as the attribute is set to true. Now run: npm run build and npm run serve

You will see that the text is red as the attribute is set to false. It should however be true.