[Next.js] Next.js에서 window 혹은 document 속성 불러오기(dynamic import)

A

const NoSSR = () => {
  return <p>width: {window.innerWidth}</p>;
};
export default NoSSR;

 

B

import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import NoSSR from '../../components/section1/NoSSR';

const Example: NextPage = () => {
  return (
    <main>
      <h1>SSR에서 윈도우 객체 불러오기</h1>
      <hr />
      <h1>no SSR</h1>
      <NoSSR />
    </main>
  );
};

export default Example;

보통 React를 사용 할 때 A컴포넌트를 B컴포넌트에서 사용 할 때 일반적인 import를 통해 가져오게 된다.

 

하지만 Next에서 위와 같은 방식으로 window 혹은 document의 객체에 접근하게 되면

위와 같은 에러(보통은 window나 document 같은 속성을 useEffect 밖에서 사용할 때)를 만나게 되는데. 이유는 무엇일까?

 

기본적으로 페이지에 포함되는 컴포넌트는 서버에서 렌더링 되게 되는데 서버에서는 window 또는 document 객체를 알 수 없다. 그러한 이유로 위와 같은 에러를 띄우게 되는데

 

이럴 때 SSR로 렌더링 하고싶지 않은 컴포넌트가 있을 경우 일반적인 import문을 통해 컴포넌트를 가져올 것이 아니라 Next.js에서 제공하는 next/dynamic을 이용해서 import를 해야한다.

 

ex) dynamic

import type { NextPage } from 'next';
import dynamic from 'next/dynamic';

/** https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr */
const NoSSR = dynamic(() => import('../../components/section1/NoSSR'), {
  ssr: false,
});

const Example: NextPage = () => {
  return (
    <main>
      <h1>SSR에서 윈도우 객체 불러오기</h1>
      <hr />
      <h1>no SSR</h1>
      <NoSSR />
    </main>
  );
};

export default Example;

dynamic을 통해 아까와 같은 경로를 import 해준 뒤 ssr : false 라는 옵션을 적용을 해주게 되면

 

위와 같이 에러 없이 window.innerWidth의 값을 가져올 수 있게 된다.(대신 SSR 방식을 사용하지 않았기 때문에 HTML파일에서 window.innerWidth의 값은 포함돼있지 않다.)