Trouble Shouting

우선 , Next.js는 기본적으로 모든 페이지를 pre-rendering한다. 즉, 모든 페이지의 HTML를 미리 생성하고, 생성된 HTML은 자바스크립트 코드와 연결되어 유저와 페이지가 상호작용 할 수 있는 interactive한 페이지를 만들어낸다. 이것이 hydration이다. 🔥 문제상황 중고나라 웹사이트를 개발하며 처음으로 sentry를 들여다보며 자주 발생하는 error를 확인했다. Hydration failed because the initial UI does not match what was rendered on the server. 오류 문구 그대로 서버에서 그려지는 HTML 페이지와 클라이언트에서 그려지는 HTML 페이지가 다르기 때문에 문제가 발생하는 것이다. 즉, Pre-Rende..
Happhee.dev
'Trouble Shouting' 카테고리의 글 목록