Prop 'className' did not match
- Next.js에서 styled-component를 적용하고 렌더링을 시키니 위와 같은 에러가 발생했다.
- 이러한 에러가 발생한 이유는 첫 화면 렌더링은 SSR이고, 이후 페이지 이동 시 발생하는 렌더링은 CSR이기 때문에 서버/클라이언트 간의 ClassName의 차이가 발생하기 때문이다.
- 아래 에러 메시지에서 더 자세히 확인할 수 있다.
Warning: Prop `className` did not match.
server: "sc-ftvSup lFHmx" Client: "sc-dkzDqf dTlXpN"
npm i --save-dev babel-plugin-styled-components
.babelrc
파일 생성 후 plugin을 추가해준다.{
"plugins": ["babel-plugin-styled-components"]
}
NPM에서의 설명
consistently hashed component classNames between environments (a must for server-side rendering)
환경 간 일간된 hashed className을 제공한다.(서버 사이드 렌더링에서 필수적이다.)
위 참고한 자료에서 더 자세한 설명이 나와있다.
컴포넌트가 생성되는 순서에 따라 같은 컴포넌트이더라도 다른 식별자가 붙을 수 있게 된다. SSR과 CSR을 같이 활용하는 경우 서버와 클라이언트가 컴포넌트를 생성하는 순서에 따라 식별자가 달라질 수 있다.