How to avoid rehydration problems with Gatsby and React SSR

Reading about SSR to get a better understanding and I like the cereal box analogy in this post near the end https://www.joshwcomeau.com/react/the-perils-of-rehydration/

Josh W Comeau Latest Posts Snippets Goodies Home Tutorials React Introduction Some problematic code Server-side rendering 101 Dynamic sections Schrodinger's user A noble but flawed attempt Rehydration ≠ render The solution Two-pass rendering Performance implications Abstractions Mental models Introduction I ran into the strangest issue recently. Everything was groovy in development, but in production, the bottom of my blog was doing something… unintended: A hot mess of UI soup A bit of digging into the Elements tab in the devtools revealed the culprit… My React component was rendering in the wrong spot! html html How could this be? Had I discovered a bug in React? I checked the React Devtools "⚛️ Components" tab, and it told a different story, one in which everything was fine, and the pieces were all where they were supposed to be. What a liar! It turns out, I had a fundamental misunder...

Linked on 2020-12-15 02:45:15 | Similar Links