발단
React 강좌 - Nextjs 파트 실습 중, 계속해서 콘솔에 의문의 에러가 찍히길래 원인을 찾아봤다.
실습에서 구현하는 기능들은 잘 돌아감에도 불구하고 계속 뜨는 콘솔 에러에 도대체 어디서 나는 오류인지 호기심 발동…
에러명
“Extra attributes from the server: ~~”
원인 파악
- 괜히 문제가 발생하는 지점의 코드로 찾아가보았다.
(어차피 봐도 모르겠지만 궁금하니까요)
에러 지점 : line 32
…
잘 구경했으니
- 구글링
역시 스택오버플로우에서바로 원인을 발견했다.
요약하면 :
- 네가 설치한 크롬 확장 프로그램은 네 html 코드에 extra attributes(속성)들을 덧붙이게 되는데, 이게 서버 측에서 렌더링 된 것과 클라이언트측 렌더링 사이의 충돌을 일으킨 것임
- 보통 Grammarly, ColorZilla, LanguageTool 같은 확장 프로그램들이 원인이고
- html 소스를 들여다보면 무엇이 원인인지 찾을 수 있음
- lt = LanguageTool
- gr = Grammarly
- cz = ColorZilla
- 등등…
- 원인이 되는 확장 프로그램을 찾아 개발 포트 위에서 실행되지 않도록 disable시켜라.
- 근데 웬만하면 development 환경에서 확장 프로그램을 쓰지 않는 것을 추천함 ⭐️
문제 해결
그래서 나의 html 소스를 들여다본 결과,
에러명 뒤에 뜨는
data-redeviation-bs-uid
는 내가 설치해둔 크롬 북마크 익스텐션의 일부였다.해당 확장 프로그램 사용을 해제했더니 콘솔에 더이상 에러가 뜨지 않는다. 👏
보너스
스택오버플로우 답변자의 Good to know:
❗️RootLayout의 <body> 태그에
suppressHydrationWarning={true}
속성을 추가하면
⇒ hydration warnings를 억제할 수 있다고 한다.
(만약 크롬 익스텐션 속성이 <html>태그에 부여된다면, <html> 속성으로 넣어주어야 함)+) Hydration Errors
서버에서 렌더링된 html은 클라이언트측에서 hydrate하는 과정을 거쳐야 하는데,
이때 사용하는 메소드가
hydrateRoot()
!Hydration은 서버로부터 받은 최초의 HTML snapshot을 브라우저 상에서 완전한 interactive app으로서 동작하도록 만들어준다.
그런데, 이때 hydrateRoot에 전달하는 React 트리는 서버에서와 동일한 출력을 생성해야 한다.
그렇지 않은 경우 에러가 발생하는 것.
아래의 내용을 참고!
[hydration error가 발생하는 가장 흔한 경우들]
- 루트 노드 내부에서 React로 생성된 HTML 주위에 추가 공백(예: 줄 바꿈)이 있는 경우
- 렌더링 로직에 typeof window !== 'undefined' 같은 체크 구문 사용
- 렌더링 로직에 window.matchMedia와 같은 브라우저 전용 API를 사용
- 서버와 클라이언트에서 서로 다른 데이터를 렌더링하는 경우