반응형
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에 안전하게 접근이 가능하다.
반응형
'React > Next.js' 카테고리의 다른 글
[Next.js] Server Component 와 Client Component (1) | 2023.12.07 |
---|---|
[Next.js] Route System - 4) Route Groups (4) | 2023.12.06 |
[Next.js] Route System - 3) next/route useRouter (2) | 2023.12.05 |
[Next.js] Route System - 2) next/link - Link (0) | 2023.12.05 |
[Next.js] Route System - 1) pages, app 라우팅 (0) | 2023.12.05 |
댓글