Why do I get a "Hydration failed" error when initializing a project using Remix's Indie stack in Devtools?

Question

When I was learning Remix, I followed the tutorial to initialize a project, but when I opened Devtools, I found that several errors were reported in the console. Warning: Server HTML containing

tags within is not expected. Error: Hydration failed because the initial UI does not match what is rendered on the server. *nThe most ridiculous thing is that I opened the home page of Remix, and its home page also reported the same error, so I was particularly curious whether the hydration was successful and why this error occurred.

P粉043566314 · Answer

This is a well-known React issue caused by browser extensions modifying the DOM.

It's more obvious in Remix because it renders the entire , not just

. 
You can confirm whether a browser extension is causing the problem by using a browser profile without the extension installed (or in incognito mode). 
Kiliman demonstrates a workaround here: https://github.com/kiliman/remix-hydration-fix, which involves rendering the header and application separately.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial