[FIX] 화면이 제대로 렌더링 되지 않는 이슈

[anonymousRecords]

이슈 상황

배포 링크를 데스크탑을 통해서 들어갈 경우, 화면이 제대로 렌더링 되지 않음을 확인할 수 있다. (모바일의 경우, 잘 보인다.)

[anonymousRecords]

➕ 에러 화면 추가

[anonymousRecords]

📌 해결 방법

참고 커밋

<Calendar
   locale="ko-KR"
...

locale="ko-KR"을 추가해서 해당 에러를 해결했다.

[anonymousRecords]

📌 이슈 분석

해당 이슈는 Nextjs 동작 원리에 기인한 이슈이다. Next.js는 기본적으로 1) 페이지를 서버에서 렌더링한 후 클라이언트에 전달하고, 2)클라이언트에서는 이후에 CSR을 통해 페이지를 hydrate한다. 이때 발생한 이슈는 서버와 클라이언트 간의 초기 렌더링 차이로 인해 발생한 것이다.

에러에서 확인 가능하듯이, 서버에서는 영어인 May 2024로 표시가 되고 클라이언트에서는 2024년 5월 표시되고 있었다. 그러다보니 렌더링된 HTML이 서로 다르게 되어 Text content did not match 에러가 발생한 것이다.

따라서 Locale 설정을 통해 해당 이슈를 해결했다. 달력 컴포넌트에 locale="ko-KR"을 명시하여 한국어로 표시하도록 설정했다. 이렇게 하면 서버에서 렌더링된 결과와 클라이언트에서 hydrate된 결과가 일치하여 에러가 발생하지 않는다.

📌 느낀점

해당 이슈는 통해 Next.js의 동작 원리에 대해 다시금 생각하게 된 계기가 되었다. Next.js에서는 SSR과 CSR을 함께 사용하다보니, 초기 렌더링과 후속 CSR 사이의 데이터 일관성 유지를 고려해야겠다고 느꼈다.