Next.js는 리액트 프레임워크로 프리랜더링을 지원하여 SEO 최적화와 성능 개선을 위해 HTML을 먼저 생성한다. 그래서 window를 참조하는 이벤트를 사용하면 에러가 발생 할 수 있다.
window 참조 오류 해결 법
- typeof 연산자 : window 객체가 존재하는 지 판단 하는 방법
클라이언트에서 렌더링 할 때까지 기다렸다가, window를 참조할 수 있는 시점에 코드 실행
if (typeof window !== "undefined") {
// window 객체를 사용하는 코드
}
// 블로그에서 사용된 코드
const [scrennWidth, setScrennWidth] = useState(
typeof window !== "undefined" ? window.innerWidth : 0
);
- next/dynamic : 페이지 컴포넌트를 동적으로 불러오는 방법
window를 참조한 컴포넌트를 동적으로 불러와서 문제를 해결할 수 있다.
ssr: false 옵션을 사용하면 Server-Side에서 해당 컴포넌트를 불러오지 않고, Clinet-Side에서 렌더링할 때만 불러와서 오류가 발생하지 않는다.
import dynamic from "next/dynamic";
const DynamicComponentWithNoSSR = dynamic(() => import("@/components/windowContain"), { ssr: false });
- useEffect Hook
useEffect는 렌더링 이후에 호출되어 클라이언트 사이드에서만 동작하여 오류가 발생하지 않는다.
useEffect(() => {
// 여기서 window or document 객체에 접근
const innerHeight = window.innerHeight
},[])
'에러 일지' 카테고리의 다른 글
Notion api 100개 초과일 때 (0) | 2024.09.06 |
---|---|
NotionAPI - LargePageDataBytes (0) | 2024.09.06 |
CORS 에러 (0) | 2024.08.30 |
Hydration failed 에러 (0) | 2024.08.22 |