현재 시간 rendering - RUNTIME ERROR 해결

 

cafe에서 흔히 사용하는 pos 프로그램을 만들면서,

화면에 현재 시간이 보일 수 있도록 new Date()로 useEffect를 사용해

처음 화면이 rendering되었을 때에만  현재 시간을 가져오게끔

의존성 배열도 [] 빈 배열로 만들어두었다.

 

 

다른 코드를 쓰다가 쓴 코드를 확인하려고 브라우저에서 실행해둔 페이지를 확인했는데 뜬 에러를 보고

"아까까지 잘만 되던 게 왜 안 되지?"

하고 당황해서 에러 메시지를 잘 읽어봤다.

 

이유인 즉슨, SSR를 기본적으로 지원하는 Next.js과, CSR을 기본적으로 지원하는 React.js 간의 차이 때문에

충돌이 발생했던 것..!

 

Next.js와 React.js를 함께 쓰게 되면, 처음에는 Next.js로 SSR 된 HTML을 클라이언트로 가져와서,

그 다음부터는 React.js가 서버에서 가져온 값과 달라진 부분만 내용을 갈아끼우는(hydrate) 작업을 클라이언트에서만 처리하게 되어있는데,

처음 렌더링할 때야 서버에서 가져온 시간과 hydrate하는 시간에 차이가 없어 문제가 발생하지 않지만, hydrate를 하는 시간이 처음 렌더링과 달라지게 되면서부터 문제가 발생한다는 것이다.

 

 

이걸 어떻게 해결하느냐..

검색을 해봤더니 동시에 이루어지는 CSR과 SSR중 SSR 기능이 동작하지 않게끔 끄면 된다고 한다.

이건 Next.js에서 제공하는 dynamic() 함수와 ssr: false 옵션으로 컴포넌트를 동적으로 불러오면 깔끔하게 해결된다고...ㅎㅎㅎ

 

단, dynamic() 함수는 모듈 또는 컴포넌트를 통째로 동적으로 불러오는 역할을 하기 때문에, 시계가 있던 컴포넌트 안에서  이 현재 시간 코드를 동적으로 불러오도록 처리하게 된다면 다른 내용까지도 SEO(검색 엔진 최적화)에 영향을 주지 못하게 된다고 한다.

그래서 번거롭더라도 이렇게 동적으로 불러오고 싶은 부분만 별도로 컴포넌트를 분리해서 import 해오는 방식을 취해야 한다.

 

 

 

해결 완료!!😍