<p>Remix를 배울 때 튜토리얼에 따라 프로젝트를 초기화했는데 Devtools를 실행해보니 콘솔에 여러 가지 오류가 보고되는 것을 발견했습니다. </p><p>
<code>경고: <html> 내에 <div> 태그가 포함된 서버 HTML은 필요하지 않습니다. </code></p><p>
<code>오류: 초기 UI가 서버에서 렌더링된 것과 일치하지 않아 하이드레이션에 실패했습니다. *n
가장 우스꽝스러운 점은 리믹스 홈페이지를 열었는데, 리믹스 홈페이지에도 같은 오류가 보고되어 있어서 하이드레이션이 성공했는지, 왜 이런 오류가 발생했는지 특히 궁금했습니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](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. 여기에는 헤더와 애플리케이션을 별도로 렌더링하는 작업이 포함됩니다.