SSR에서 window is undefined 에러 수정 방법

next.js에서 개발 하다보니 window is undefined라는 문구를 볼 때가 있다.

Server Error

ReferenceError: window is not defined

CSR(client side rendering)을 주로 하던 나에겐 서버 사이드 렌더링에서 생길 수 있는 오류에 대해 방심하고 있던 찰나 생긴 오류였다. 인터넷을 보니 몇가지 방법으로 오류를 해결 할 수 있었다.

1. window의 타입을 확인하자

if (typeof window !=== 'undefined') {
  // ...code
}
or
 if (typeof window === 'undefined') return;

  // ...code

위와 같은 방법으로 클라이언트에서 렌더링을 할때 까지 기다렸다가 그 때가 되면 window를 받아오는 방식이다.

2. useEffect안에서 사용하자

useEffect(() => {
  const innerHeight = window.innerHeight
}, [])

useEffect는 클라이언트 렌더링 시 동작하므로 그 때 마춰서 사용하면 된다.

3. next의 dynamic을 사용하자

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../component/navbar'), {
  ssr: false,
})

const App = () => {

  return (
    <>
      <DynamicComponent>
      <div>This is an App</div>
    </>
  )
}

이런 방식으로 작성하면 클라이언트 단에서 동적으로 컴포넌트를 import하기 때문에 그 안에 있는 window를 호출하는데 문제 없다.

그 외에도 window-or-global 같은 걸 사용할 수 있다.