[Next.js] 'sessionStorage is not defined' 문제

Next.js는 SSR(Sever Side Rendering) 을 지원하는 React 프레임워크이다. SSR(Sever Side Rendering)은 클라이언트(브라우저) 대신 서버에서 초기 HTML을 생성하고 렌더링하는 방식이다. 이 접근 방식은 여러 가지 이점을 제공하지만, window, document, sessionStorage와 같은 브라우저 전역 객체를 직접 사용할 수 없다!

SSR(Sever Side Rendering) 과정에서는 코드가 서버에서 실행되는데, 서버에는 브라우저가 없기 때문에 브라우저 전역 객체인 window, document, sessionStorage 등이 정의되어 있지 않은 것이다.

따라서 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 과정에서 이러한 객체에 접근하려고 하면 "참조 오류(ReferenceError: sessionStorage is not defined)"가 발생하는 것이다. 그래서 페이지가 cilent에 로드될때까지 sessionStorage에 접근 불가능하다.

SSR(Sever Side Rendering) 방식을 사용하는 Next.js 환경에서 위 브라우저 전역 객체를 안전하게 사용하려면, 해당 코드가 클라이언트 사이드에서만 실행되도록 해야 한다. 아래 두가지 방법을 확인해보자.

1. 조건문 사용

typeof window !== "undefined"를 사용하여 window 객체가 존재하는지 확인한다. 이 조건문은 서버에서는 false가 되어 해당 코드 블록을 건너뛰게 하고, 클라이언트에서는 true가 되어 코드를 실행합니다.

if (typeof window !== "undefined") {
  // 클라이언트 사이드에서만 실행될 코드
  sessionStorage.getItem('key');
}

2. 훅 사용

React의 useEffect 훅은 컴포넌트가 렌더링된 후 클라이언트 사이드에서만 코드를 실행할 수 있기 때문에 useEffect 내부에서 브라우저 전역 객체를 안전하게 사용할 수 있는 것이다.

useEffect(() => {
  // 클라이언트 사이드에서만 실행될 코드
  sessionStorage.getItem('key');
}, []);