[알게된 것] Error: PDFViewer is a web specific API.

😀문제상황

NextJS에서 PDF를 활용하기 위해 @react-pdf/renderer를 사용중이였고, 빌드 혹은 개발 과정에서 터미널 창에

Error: PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.

오류가 발생하였음

😁해결방법

이 에러를 포함한 모든 ssr측 오류는 useEffect를 활용한 방법으로 해결한다.

const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);
  return (
    <div className="">
      {isClient && (
        <PDFViewer width={1400} height={700} showToolbar={false}>
          <MyDoc />
        </PDFViewer>
      )}
    </div>
  );

즉 로딩이 완료되었을 때, 정확히는 클라이언트 렌더링이 시작되었을 때 조회 가능하게 변경하면 됨