🎇
개발
SSG에서 시간 관련 트러블슈팅
sooros5132-avatarsooros51327/23/2022SSG NoSSR

date-fns의 format을 이용할 때 서버와 클라의 시간이 다름에 따른 오류

👌
date-fns의 foramt대안으로 date-fns-tz모듈의 formatInTimeZone을 이용하면 됨

GitHub - marnusw/date-fns-tz: Complementary library for date-fns v2 adding IANA time zone support

Complementary library for date-fns v2 adding IANA time zone support - marnusw/date-fns-tz

GitHub - marnusw/date-fns-tz: Complementary library for date-fns v2 adding IANA time zone support-faviconhttps://github.com/marnusw/date-fns-tz

원인
vercel에서 배포할 때 서버의 시간은 UTC, 클라이언트는 KST를 사용하게 되면서 클라이언트에서 렌더링 에러가 나게 된다. format할 때 타임존을 세팅하면 해결 됨
서버와 클라이언트가 다르게 렌더링 하는 모습.

getStaticProps로 생성된 SSG 페이지에서 현재 시간과 시간 차이를 계산할 때

1분 전 수정됨, 1시간 전 수정됨과 같은 동적으로 생성되어야 할 문구들은 정적 페이지와 어울리지 않는다. 이 부분만 따로 NoSsr을 이용해야 되는데 Next js의 dynamic기능을 이용하면 된다.
따로 컴포넌트로 생성해서 dynamic import해도 되고 Wapper를 만들어도 된다. 나같은 경우는 짧은 텍스트이니 Wapper컴포넌트를 만들고 감싸는 식으로 했다.
NoSsrWrapper.tsx
typescript
import React from 'react';
import dynamic from 'next/dynamic';

const NoSsrWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <React.Fragment>{children}</React.Fragment>
);

export default dynamic(() => Promise.resolve(NoSsrWrapper), {
  ssr: false
});
적용 할 .tsx 파일
typescript
// ...
{
  typeof page.properties?.updatedAt?.last_edited_time === "string" && (
    <NoSsrWrapper>
      {`, ${formatDistance(
        utcToZonedTime(
          new Date(page.properties.updatedAt.last_edited_time),
          config.TZ
        ),
        utcToZonedTime(new Date(), config.TZ),
        {
          locale: koLocale,
          addSuffix: true,
        }
      )} 수정됨`}
    </NoSsrWrapper>
  );
}
// ...
View Archive