[최종 프로젝트 - 리팩토링] vercel 배포 오류 (document is not defined) > netlify

 

 

 

🚨 문제 발생

어젯밤 성능 최적화에 성공을 한 후 리팩터링 한 레파지토리를 vercel에 배포하기 위해 배포를 시도했더니 오류가 뜨더라..

 

 

ReferenceError: document is not defined

 

해당 오류는 서버 측에서 document 객체를 참조하려 할 때 발생하는 오류이다.

document는 브라우저 환경에서만 존재하기 때문에, 서버 사이드에서 실행되는 코드에서는 사용할 수 없다.

 

 

 

 

 

💻 문제 해결 시도

 

첫번째 방법

useState, useEffect, document, window를 사용한 모든 페이지에 "use client"를 추가하기

 

결론은 실패를 하였다.

아무리 use client가 붙어 있는 곳이라도 hydration 과정 중 실행환경이 window 객체가 없는 서버환경에서 실행되기 때문에 이런 오류가 계속 뜨기도 한다고 한다.

 

두 번째 방법

document, window를 사용하고 있는 모든 곳에 아래와 같이 조건문을 달아줬다.

if (typeof window !== "undefined") {
  // 클라이언트 환경에서만 실행되도록
  if (isMenuOpen) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "unset";
  }
}

 

그랬는데도 실패..

 

Netlify 배포

하는 수 없이 Netlify에서 배포하기로 마음을 먹고.. 다시 배포 시작!!

 

여기서는 진짜 한 번에 성공하더라..

 

 

배포 후 수정할 내용들이 몇 개 있어서 수정 후 반영이 잘 되었는지 Netlify에서 확인을 했다.

아주 빠릿빠릿하게 수정사항까지 반영 완료..

 

 

https://ecomoa.netlify.app/

에코모아

 

 

 

 

---

 

번외

Next.js로 작업한 만큼 Vercel에서 배포하고 싶었는데 그러지 못한 점이 아쉬워서 진짜 수십 번의 수정을 통해 시도했지만 결국 실패했다.

 

프로젝트 전체에 아래의 코드를 작성하면 프로젝트가 클라이언트 사이드로 렌더링이 되게 할 수는 있다.

(사실 이 방법으로 여러 컴포넌트에 적용시켜 봤지만 실패를 했고.. 전체적으로 적용했을 때만 적용이 되더라..)

// Providers를 클라이언트 전용으로 동적 import
const Providers = dynamic(() => import("@/components/shared/providers"), {
  ssr: false // 서버 사이드 렌더링을 하지 않음
});

 

하지만 Next.js를 사용하는 이유 중 하나는 ssr을 사용하기 위해서 아닌가.. 그래서 그냥 이번만큼은 Netlify에서 배포하기로..

 

 

 

참고로 위의 코드를 작성하면 아래와 같이 녹색 체크표시가 뜨며 배포 성공 ㅜㅜ

 

다음 프로젝트에서는 최대한 ssr과 csr의 충돌을 하나하나 막아보기 위해 열심히 배포해보려고 한다.

 

그리고... 리팩토링을 마무리하려고 하다 보니 진짜 이 리팩토링이 아쉬웠던 건

같이 리팩토링 하기로 하신 분이 작업하시다 말고 말도 없이 탈주를 하셔서.. 어디가 문제인지 잘 찾지를 못하는 건 참 아쉽다.. ㅜㅜ

아마 그 분과 이야기 조금만 해봤더라면 빨리 찾을 수 있었을 것 같은데... 왜 모든 분들과 연락이 두절되셨나요ㅠㅠ

 

이제 디자이너분들께서 요청하신 내용이 조금 더 있어서 이번주까지만 만지고 다음 단계로 나아가 볼 듯하다.

다시 달려~!!