문제

• Top버튼 구현 중 상세 페이지, 검색결과 페이지에 Top버튼 컴포넌트를 추가했는데 오류 발생

  

원인

• Next.js는 기본적으로 서버에서 렌더링이 되기 때문에 document는 서버에서는 사용할 수 없다.

해결

• Top버튼을 컴포넌트로 만들었기 때문에 Top버튼을 쓰는 페이지에서 dynamic import 를 사용해 클라이언트에서 코드가 실행되게 했더니 오류 해결!

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

문제

• VSC에서 내용을 수정하고 저장하면 Main Page에서 Top버튼이 보이는데 새로고침을 하면 Top버튼이 보이지 않는다.
  • dynamic imoprt를 쓴 검색 페이지에서는 새로고침을 해도 Top버튼이 잘 작동한다.

원인

• Top버튼 컴포넌트를 사용한 CountTab 컴포넌트 자체가 클라이언트에서 실행되도록 했기 때문에 Top 버튼 컴포넌트는 dynamic import 를 사용하지 않았다.

해결

• CountTab 컴포넌트 에서도 Top 버튼 컴포넌트를 dynamic import 하니 메인 페이지에서 새로 고침해도 Top버튼이 잘 동작한다!

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