[Next.js] Dynamic Import

Next.js에서 서버에서 랜더링할때  나타나는 문제입니다.

모달을 만들어서 사용할 때, Modal을 Import 하기전에 SSR방식으로 Modal을 렌더링 할 경우 에러를 동반했습니다.

 

Next.js SSR 렌더링 순서

1. 클라이언트 요청
2. Server Side 단에서 웹 페이지를 Pre-Rendering 으로 HTML 문서 생성
3. 생성된 HTML 문서를 클라이언트에 전송
4. 리액트에서 번들링된 JS파일을 클라이언트에 전송
5. 클라이언트 단에서는 HTML 문서위에 전송받은 JS 파일을 매칭

 

동적 코드 분할 Dynamic Imports

import dynamic from "next/dynamic";

const Header = () => {
  const Modal = dynamic(() => import("components/templates/Modal"), {
    ssr: false,
  });

  return (
    <Layout>
      <Modal/>
      ...
    </Layout>

 

대부분의 코드들은 사용자가 보는 첫 페이지에는 필요하지 않기 때문에 페이지 진입시에 최소한의 코드만 다운 받고,

사용자가 특정 페이지나 위치에 도달할 때마다 코드를 로드 한다면, 첫 페이지의 초기 성능을 올릴 수 있습니다.

 

이런 방식을 lazy-loading 이라고 합니다.

Dynamic Import 를 사용하면, 런타임시에 필요한 module 을 import 할 수 있습니다.

Dynamic Import 는 일반적인 정적인 Module Import 를 필요한 시점 에 로드 할 수 있도록 도와주며,

이를 이용해 거대한 하나의 JS 를 여러 JS 로 쪼갤수 있게되고, 화면이 위치할 때마다, 사용자가 클릭할 때마다 Import 함으로서, 분할하여 관리할 수 있게 된다.

또한 일반적인 Import 에서는 불가능한 방법도 가능합니다.

 

 

https://pks2974.medium.com/dynamic-import-%EB%A1%9C%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%84%B1%EB%8A%A5-%EC%98%AC%EB%A6%AC%EA%B8%B0-caf62cc8c375