Window Error

ReferenceError: window is not defined

1. 문제점이 생기게된 배경

   Home화면에서 ScrollReveal Effect를 넣어 좀 더 인터랙티브한 화면을 구성하고 싶었다.
   ScrollReveal effect를 적용하기 위해 ScrollReveal 라이브러리를 import하여 사용하기로 했다.

다만 ScrollReveal 기능은 클라이언트로 컴포넌트로 구성해야 했기 때문에
현재 서버 컴포넌트로 되어있는 Home에서는 직접 import해서 사용할 수 없었다.

그래서 따로 RevealSection.js로 컴포넌트를 나누어 코드를 작성하고 Home에서 컴포넌트를 이용하려고 했다.

해당 에러는 사실 "npm run dev"로 프로젝트를 실행시키면 위와 같이 에러는 뜨지만 문제없이 작동한다.
하지만 build시에는 Error로 인해 빌드가 정상적으로 되지 않아 배포가 불가능하다.

2. 원인

Next.js는 기본적으로 SSR을 지원한다. 그래서 현재 에러는
서버 환경에서 window객체에 접근하려고 할때 발생하는 것이다.

window 객체는 브라우저 환경에만 존재

1. window 객체

   • 브라우저 환경에서 DOM을 조작하거나, 쿠키 , 로컬 스토리지 같은
     클라이언트 측 데이터에 접근할 때 사용

2. 서버와 클라이언트의 실행 시점 차이

   • 서버 컴포넌트에서 클라이언트 전용 객체에 접근하려고 시도하면, 객체를 찾지 못해서 에러를 반환한다.

3. 해결 방법

   1. 클라이언트 컴포넌트로 분리

      'use client' 선언해서 기본적으로 설정되어 있는 서버 컴포넌트를 클라이언트 컴포넌트로 변경해 사용 (브라우저에서 렌더링하게끔)

   2. 조건부로 window객체 사용

   	if(typeof window !== "undefined") {
       ...
       }

   typeof window => undefined

   3. 동적 import를 활용

      		import dynamic from 'next/dynamic'
      
      		cosnt ScrollReveal = dynamic(()=> import('scrollreveal'), {ssr:false});
      

      클라이언트 사이드에서만 필요한 라이브러리를 dynamic을 통해서 ssr:false 옵션 지정