Devtools에서 Remix의 인디 스택을 사용하여 프로젝트를 초기화할 때 "수화 실패" 오류가 발생하는 이유는 무엇입니까?
P粉476475551
2023-08-30 00:12:22
0
1
414
Remix를 배울 때 튜토리얼에 따라 프로젝트를 초기화했는데 Devtools를 실행해보니 콘솔에 여러 가지 오류가 보고되는 것을 발견했습니다.
가장 우스꽝스러운 점은 리믹스 홈페이지를 열었는데, 리믹스 홈페이지에도 같은 오류가 보고되어 있어서 하이드레이션이 성공했는지, 왜 이런 오류가 발생했는지 특히 궁금했습니다. 경고: 내에 태그가 포함된 서버 HTML은 필요하지 않습니다.
오류: 초기 UI가 서버에서 렌더링된 것과 일치하지 않아 하이드레이션에 실패했습니다.*n
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이것은 DOM을 수정하는 브라우저 확장으로 인해 발생하는잘 알려진 React 문제입니다.
은 전체를 렌더링하기 때문에 Remix에서 더 분명합니다
，而不仅仅是.확장 프로그램이 설치되지 않은 상태(또는 시크릿 모드)의 브라우저 프로필을 사용하여 브라우저 확장 프로그램이 문제를 일으키는지 확인할 수 있습니다.
Kiliman은 여기에서 해결 방법을 보여줍니다:https://github.com/kiliman/remix-hydration-fix. 여기에는 헤더와 애플리케이션을 별도로 렌더링하는 작업이 포함됩니다.