문제

• vercel 배포 후에만 console에 찍히는 Error

원인

• new Date() 를 썼을 때 클라이언트의 시간과 서버의 시간이 맞지 않아서 생기는 문제

• util.ts에서 만든 getToday() 함수를 쓰는 컴포넌트가 메인에 3개 있다.

  • CountTab.tsx HomeList.tsx OverLay.tsx(지도에 쓰임)
  • utill.ts

  // 오늘 날짜 구하기 - 분양 정보 DB의 날짜 형식 0000-00-00
  export const getToday = () => {
    const date = new Date();
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const today = year + '-' + month + '-' + day;
  
    return today;
  };
  

해결

• Next.js의 dynamic Import(동적 임포트) 활용

  • 특정 컴포넌트를 클라이언트에서만 실행하는 것
  • getToday() 함수를 쓰는 컴포넌트는 모두 dynamic import로 클라이언트에서만 실행되게 했더니 오류가 사라졌다.
  • ex) index.tsx(메인 페이지)

  const CountTabs = dynamic(
      () => import('@/components/MainPage/CountTabs/CountTabs'),
      {
        ssr: false,
      },
    );
  

• 단점

  • 해당 컴포넌트가 클라이언트에서만 실행되기 때문에 Main Page에서 Javascript를 끄고 보면 Header를 제외하곤 하얀 화면만 보인다는 것

  

참고자료

https://velog.io/@real-bird/Next.js-SSR-Error-React18-error-423-418-425