[TIL] 2023-1008

Facts

- react-notion-x 를 활용해 notion page 를 html 로 옮기는 작업을 하고 있음

- 그냥 문서 보면서 적용해보는 중

 

Feelings

- 이것저것 뜯어보는 재미는 있다. 

 

Findings

- supperHydrationWarning

Next.js 의 app router 와 server component 를 사용하는 도중 아래와 같은 에러를 만났다. 

결론적으로 위 에러를 안보이게 하려면 suppressHydrationWarning 옵션을 true로 주면 된다.

 

이런 에러가 발생하는 원인이 뭘까? 서버를 통해 렌더링 되기를 기대하는 결과물과 실제로 클라이언트에서 렌더된 결과물이 일치하지 않았을 때 발생하는 에러이다. hydration 의 정의를 생각해보면, 서버에서 렌더링된 정적 html 을 동적으로 다룰 수 있도록 클라이언트에서 자바스크립트를 통해 변경되는 과정이다. 여기서 서버에서 렌더된 html 과 클라이언트에서 렌더될 html 에 차이가 발생하면 추가적인 연산이 필요하고, 이는 사용자 경험의 저하로 이어질 수 있다. 위와 같이 옵션을 주어서 에러를 억제하는 것은 근본적인 해결 방법은 아닌 셈이다.

 

근데 위 문제가 특별한 상황은 아니고, 크롬 + next 로컬 환경에서 개발하다보면 익스텐션 때문에 종종 뜬다.

 

Feedback

- 매일 조금씩 꾸준히 합시다