hydrationerror

─리액트로 CSR 페이지를 만들다가 NextJs로 넘어오면, 마주했을 때 가장 당황스러운 개념 중 하나가 바로 Hydration Error(이하 HE)일 것이다. 일반적으로 이 HE를 설명할 때 "서버에서 랜더링 된 HTML과 클라이언트에서 React가 다시 렌더링할 때의 HTML이 다를 경우" 발생한다는 식으로 이야기하곤 한다.그런데 여기서 말하는 '다를 경우'라는 게 구체적으로 어떻게 다른 걸 의미하는지 오랫동안 제대로 이해하지 못했다. 정확히는 이해할 생각조차 하지 않았다고 하는 게 맞겠다. 서버와 클라이언트가 동일하면 HE는 발생하지 않을 거고, 그 외에는 크게 중요하지 않은 것처럼 느껴졌다. 이번 주에 나는 엑세스토큰과 리프레시토큰을 어떻게 관리하고, 어떻게 사용하는 게 best practice..