[Next.js] Text content does not match server-rendered HTML

술먹고 집에 11시쯤 들어와서 또 프로젝트 하는 나.....ㅋㅋ
이런 기세로 포트폴리오도 쓰고 이력서도 써야하는데

요새 참 고민이 많다.

그냥 돈걱정 없으면 이렇게 짜잘하게 개발하면서 공부하고 운동하며 살고싶다..ㅠㅠ
이직에 대한 (궁극적으로는, 커리어) 생각이 많은데 이건 나중에 다른 글에서
썰을 풀어 봐야지.

나의 고민을 들어줘.

아무튼,
오늘 로그인을 구현하면서 웹페이지 헤더부분에

• 로그인이 안된 상태
  
• 로그인이 된 상태
  

이렇게 다르게 표시해줘야 하는 부분이 있었는데,
마침 User정보를 Local Storage에 담아줬기에 그것을 활용하려 했다.

대충 아래와 같은 느낌인거지.

return (
  { 
    //userInfo는 local storage에 있는 값.
    userInfo ? 
   		<Button>`사용자명: ${userInfo.loginId}`</Button> 
		...
		:<Button>로그인/회원가입</Button>
  }
)

근데 새로고침과 동시에 아래와 같은 에러를 마주했다.

[위는 예시 이미지]

애플리케이션을 렌더링하는 동안 서버에서 미리 렌더링된 React 트리와 브라우저에서 첫 번째 렌더링(수화) 중에 렌더링된 React 트리 사이에 차이가 있었습니다.(번역)
https://nextjs.org/docs/messages/react-hydration-error

이걸 hydration이라고 하는데 Next.js는 SSR(Server Side Rendering)이다. SSR은 사전에 html을 사전렌더링하여 렌더링 속도가 높은 것이 장점인데, 브라우저 단에서 생성된 React의 트리와 차이가 생기는 경우 발생하는 오류다.

대충 발생 원인들이 많은데

이중에서 나는 3번에 해당하는 것 같다. local storage를 사용하려고 했으니까.
그리고 해결 방법들도 모두 docs에 넘나리 친절하게 잘 써있다.

const [isLoading, setIsLoading] = React.useState<boolean>(false);
...

React.useEffect(() => {
    setIsLoading(true);
}, [])

나는 위의 방법으로 해결했다.