Gatsby hydration/client-side re-render issue
See original GitHub issueDescribe the bug
The first client-side re-render (or hydration?) causes the global styles (styles.global
) to get “lost”.
Using:
- gatsby
- reflexjs
To Reproduce
- Add page
// src/pages/hydration-issue.js
import { Link } from "gatsby"
import * as React from "react"
export default function HydrationIssuePage() {
return (
<div sx={{bg: "red"}}>
<div sx={{variant: "container"}}>
<h1>Hello</h1>
<p>World!</p>
<Link to="/"><span sx={{variant: "text.link"}}>Go home</span></Link>
</div>
</div>
)
}
- Run
gatsby build && gatsby serve
- Open browser, hover over link in page
Expected behavior The styles remains mostly unchanged when hovering over the link. Only the link hover style should be applied. The global styles should not suddenly get “lost”.
Screenshots See above.
Additional context The issue does not occur in dev mode (gatsby develop).
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Fixing Gatsby's rehydration issue - LogRocket Blog
This post shows you how to overcome a rehydration issue when using server side rendering in Gatsby to makes ure your application runs...
Read more >Understanding React Hydration | Gatsby
Hydration is the process of using client-side JavaScript to add application state and interactivity to server-rendered HTML. It's a feature of React, ...
Read more >The Perils of Rehydration - Josh W Comeau
A rendering issue causes a newsletter signup form to be squashed and overlapping ... Technically, what Gatsby does is server-side rendering, ...
Read more >Gatsby, React & Hydration · Discussion #17914 - GitHub
The problem has vague and indirect side-effects, and it not necessarily easy ... Directly rendering from the client, instead of hydrating, is deprecated...
Read more >How to avoid hydration errors in Gatsby with React.lazy
418: Hydration failed because the initial UI does not match what was rendered on the server. 422: There was an error while hydrating...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’ve since switched tech stacks, so I can’t say if the issue still exists. I suggest closing the bug since nobody else complained and you couldn’t reproduce it.
Update: I narrowed down which prefetched pages cause the bug. Affected: Hovering over a link to any page that executes the
@emotion/react
keyframes
method.Example:
Note that
keyframes
is called, but the result is not actually consumed anywhere.