ssr3 [error] Hydration failed because the initial UI does not match what was rendered on the server Next.js 13.2.4 버전에서 개발 중, yarn dev 로 실행하여 캐러셀 컴포넌트를 클릭 시 발생한 에러 에러 원인 배포 전, yarn dev 로 next.js 웹 어플리케이션을 실행 후, 링크에 연결 후 빠르게 캐러셀에 클릭 등 유저 이벤트 발생 시 해당 에러 발생 해결 방법 해당 에러는 개발 중인 페이지를 yarn dev 로 실행 시, 빌드 하지 않고 ssr 이나 csr로 랜더링 되는 next.js 의 특성 상 발생하는 에러이다. yarn dev로 실행 시, 빌드되지 않은채로 ssr이나 csr 로 랜더링 된다. 이때 pre-rendering 된 요소에 hydration 이 완료되기 전에 접근하게 되면 해당 에러가 발생한다. 빌드 후 배포 시에는 pre-rendering과 hydration 사.. 2023. 2. 28. carousel 은 CSR 로 구현하자 메인 페이지의 배너를 히어로 캐러셀로 넣기 위해서 많이 쓴다는 embla 캐러셀을 사용하려 했으나 아래의 에러 발생... 해당 캐러셀의 공식 홈페이지에서 react 에서의 사용법으로 준 스켈레톤 코드 자체에 useRef 가 사용되어 있어서, hook을 사용하기 위해서는 CSR 을 적용하기 위해서 "use client" 를 사용해야만 했다.(Next.js 13버전의 CSR 구현법...) 근데, 메인 페이지 배너를 csr 로 만들고 싶지 않았으므로... 그냥 ssr 로 구현가능한 다른 라이브러리를 찾아보기로 했다 swiper slider 를 사용하였으나, 같은 에러가 발생하였다 그냥 "use client" 를 사용해서 CSR로 구현하면 된다지만, 히어로 캐러셀은 SSR로 만들고 싶었기에 더 찾아보았더니 아래.. 2023. 2. 23. Next.js 13 에는 아직 css-in-js 를 사용하긴 이른 것 같다 처음에는 css framewok로 mui(Material UI) 사용을 생각했으므로, mui에 맞게 emotion css 를 사용해보려 했으나... 듣도 보도 못한 에러가 나와서 당황하던 중... 공식 문서를 찾아보니 그렇다... emotion 과 mui는 아직 미지원 상태여서 에러가 났던거였다... 음, 그럼 스타일드 컴포넌트로 해야겠다! 나도 하던거 하면 편하니까! 근데 안되네... ssr 로 만들어야 할 레이아웃의 서버 컴포넌트를 "use client"로 클라이언트 컴포넌트로 선언해서 csr 로 해야만 에러가 나지 않더라... 해당 페이지의 csr은 내가 원하는 것이 아니었다 한참을 방법을 찾던 중, next js 13 공식 문서에서 답을 찾았지만, 설정 방법 대로 하던 중, 아래와 같은 에러 발생.. 2023. 2. 22. 이전 1 다음
