The hydration error is usually caused by deeply nested invalid HTML tags or invalid conditional rendering when the server DOM is different from the initial client-side rendering.
What we need to understand about server rendering is that we need to make sure that we are dealing with data on the server side or a very clear rendering on the client side with useEffect.
Let us look at the most common errors and how we can solve them.
<p>
<p>Nested p Hydration Error</p>
</p>
This would cause the error, consider switching the external p into a div or span. Solutions:
<div>
<p>Nested p No Hydration Error</p>
</div>
<span>
<p>Nested p No Hydration Error</p>
</span>
This error can also occur if you try to add a style to a content with a div, use span instead.
<p><div>Invalid</div> nested div for style Hydration Error</p>
Solution:
<p><span>Invalid</span> nested div for style Hydration Error</p>
// This value is being calculated outside the useEffect
const calculatedValue = user.id === ''
return (
...
{/* This causes a Hydration error */}
{calculatedValue && <div>content</div>}
...
This leads to a hydration error because the version of the server for which this value was calculated is different from the first render.
To solve this problem, we can wrap this computed value in a useEffect hook. On the first rendering, this value will be set to false and then we can set the state that will display the div with the content.
// This won't cause Hydration error
const [calculatedValue, setCalculatedValue] = useState(false)
useEffect(() => {
setCalculatedValue(user.id === '')
},[user.id])
return (
...
{calculatedValue && <div>content</div>}
...
You might experience some flashing, the reason is that when the first version is rendered, the calculatedValue is false not rendering the content, after the first rendering the content will be displayed.
There are two solutions to avoid this flashing. The first is to have a loading condition in which we show the loader while the calculatedValue is not yet ready, another solution is to load the condition server-side and then pass it to the client.