[Next.js] Next.js 에서의 localStorage

Next.js는 SSG, ISG 로 인해 client-side-rendering 하기 전 server-side-rendering 을 한다. 따라서 window, document 같은 브라우저 전역 객체를 사용할 수 없다.

window 객체는 client-side 에만 존재하기 때문에 페이지가 client에 로드되고 window 객체가 정의될 때까지 localStorage에 접근할 수 없다.

 

해결방법

1.

typeof window !== 'undefined'

if (typeof window !== 'undefined') {
	const item = localStorage.getItem('key')
}

• 페이지가 client 에 마운드될 때까지 기다렸다가 localStorage 에 접근한다.
• window 객체가 참조되지 않을 경우, undefined 를 반환한다.
• localStorage 에 접근하기 전에 localStorage 가 정의된다.

2.

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

• useEffect는 렌더링 시 실행되므로, 초기 서버 빌드 시 useEffect 내부 코드는 실행되지 않는다.
• useEffect 는 client side에서만 실행되므로 localStorage에 안전하게 접근이 가능하다.