개발하는데 다 이유가 있겠지

문제 상황

---

작업을 하던 중 `localStorage is not defined`에러가 출력됐다.

말 그래도 localStorage가 정의되지 않았다는 것이다.

localStorage(로컬 저장소)
브라우저 환경에서만 사용할 수 있는 웹 스토리지 API 중 하나이다. 클라이언트 측에서 데이터를 영구적으로 저장하는데 사용된다.
`window` 객체의 하위 객체로 존재하며, `window`객체가 존재하는 환경(브라우저)에서만 사용할 수 있다.

Next.js와 같은 SSR 환경에서 서버측 렌더링 시에는 브라우저 환경이 아닌 서버 환경에서 코드가 실행되기 때문에 `localStorage`를 사용할 수 없었던 것이다.

Next.js에서 에러가 발생하는 이유

1. SSR의 특징 : Next.js는 기본적으로 SSR을 지원하여 초기 페이지 로딩 속도를 향상시키고 SEO에 유리하다. SSR은 서버에서 HTML을 미리 생성하여 클라이언트에 전달하는 방식이다. 이 과정에서 브라우저 환경이 아닌 서버 환경에서 코드가 실행됩니다.

2. window 객체의 부재 : 브라우저 환경에서만 존재하는 window 객체는 서버 환경에서는 정의되지 않았다. localStorage 역시 window 객체의 하위 객체이므로, 서버 환경에서는 사용할 수 없다.

3. 에러 발생 시점 : 따라서 서버 측 렌더링 과정에서 localStorage에 접근하려고 하면 localStorage is not defined라는 에러가 발생하게 된다.

또한, Node.js 서버 환경과 같이 브라우저가 아닌 환경에서는 window 객체가 존재하지 않으므로 `localStorage`를 사용할 수 없다.

 

해결 방법

---

1. 브라우저 환경 확인

if ( type window !== 'undefined' ) 를 사용해 브라우저 환경인지 확인하고, 브라우저 환경일 때만 localStorage를 사용한다.

if (typeof window !== 'undefined') {
  localStorage.setItem('key', 'value');
}

 

2. SSR 환경에서의 처리

• useEffect() 훅을 사용하여 컴포넌트가 마운트 된후에 localStorage에 접근한다. 이렇게 하면 서버 측 렌더링 단계에서는 실행되지 않고, 클라이언트 측에서만 실행되기 때문에 에러가 발생하지 않는다.

 

useEffect(() => {
  const item = localStorage.getItem('key')
}, [])

• 서버 사이드에서 필요한 데이터를 생성해 클라이언트 사이드로 전달하고, 클라이언트 사이드에서 localStorage를 이용해 저장한다.

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const storedData = localStorage.getItem('myData');
      if (storedData) {
        setData(JSON.parse(storedData));
      }
    }
  }, []);

  // ...
}