Warum erhalte ich die Fehlermeldung „Hydration failed', wenn ich ein Projekt mit dem Indie-Stack von Remix in Devtools initialisiere?
P粉476475551
2023-08-30 00:12:22
<p>Als ich Remix lernte, initialisierte ich ein Projekt gemäß dem Tutorial, aber als ich Devtools öffnete, stellte ich fest, dass in der Konsole mehrere Fehler gemeldet wurden. </p><p>
<code>Warnung: Server-HTML mit <div>-Tags innerhalb von <html> </code></p><p>
<code>Fehler: Die Hydratation ist fehlgeschlagen, da die ursprüngliche Benutzeroberfläche nicht mit der Darstellung auf dem Server übereinstimmt. </code>*n</p><p>
Das Lächerlichste ist, dass ich die Homepage von Remix geöffnet habe und auf deren Homepage ebenfalls derselbe Fehler gemeldet wurde. Daher war ich besonders neugierig, ob die Hydratation erfolgreich war und warum dieser Fehler auftrat. </p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这是一个由浏览器扩展修改DOM引起的众所周知的React问题。
在Remix中更加明显，因为它会渲染整个
<html />，而不仅仅是<div id="root" />。你可以通过使用没有安装扩展的浏览器配置文件（或隐身模式）来确认是否是由浏览器扩展引起的。
Kiliman在这里演示了一个解决方法：https://github.com/kiliman/remix-hydration-fix，它涉及到分别渲染头部和应用程序。