error: did not match. Server: "a" Client: "b"

next.js는 서버 렌더링 이후 클라이언트에서 마운트가 일어나는데
서버와 클라이언트 환경이 다를 경우에 문제가 생긴다.
그래서 이를 일치 시켜주는 방법이 필요하다.

먼저 오류를 보고 든 생각은

공식문서를 보는 것이 중요하다 생각하여서 아래에 뜨는 공식문서를 참고하였다.
(문제를 해결할 수 없어도, 최소한 근본적인 지식을 얻을 수 있다.)

Text content does not match server-rendered HTML

공식문서를 확인해보면 위와 같은 제목이 뜨는데 단순히 말하면
서버에서 렌더링된 HTML과 일치하지 않습니다
는 얘기이다.

예시를 보면

function MyComponent() {

  const color = typeof window !== 'undefined' ? 'red' : 'blue'

  return <h1 className={`title ${color}`}>Hello World!</h1>
}

서버와 클라이언트를 구분하지만 렌더링 되는 것은 각각 다르기 떄문에 문제가 일어난다.

import { useEffect, useState } from 'react'
function MyComponent() {

  const [color, setColor] = useState('blue')

  useEffect(() => setColor('red'), [])

  return <h1 className={`title ${color}`}>Hello World!</h1>
}

useEffect & useState를 권장한다.

이를 활용하기로 하였다.

위와 같이 작성하였고 이를 해결하였다.

마무리

과거에 해결한 적 있는 오류였다. 그때는 props으로 내려주는 방법으로 해결 되었는데, 같은 컴포넌트에서 해결하고 싶었다.

공식문서 덕분에 빠르게 해결할 수 있었는데, next.js는 문제해결에 도움주는 문서들이 잘되어있는 것 같다.

굿!