영어하는개발자산가누렁이

19.2 Dynamic Imports
유저가 실제 그 컴포넌트를 사용할 것이라고 판단 될 때만 불러오는 것.

import dynamic from "next/dynamic"
const Bs = dynamic(() => import("@components/bs"), { ssr: false });
//이런 식으로 Bs 불러서 사용하면 됨.

// 서버단에서 로딩하지 않게 설정 가능.
// 서버에서 로딩한다면 파일위에서 컴포넌트 불러오고 렌더링 해주면
// nextjs는 서버단에서 일반 HTML로 export 해줄거야.
// 그러나 몇몇 라이브러리는 서버단에서 로딩하는게 불가능함. 그래서 서버단에서 불러오면 에러가 생가겠지.
// 이게 위처럼 {ssr:false}가 필요한 상황임.

props는 원래 하던대로 넣으면 됨. typescript에서 complain하지만 상관없음.
<>
  <Bs hello={true} />
  <Input
    name="phone"
    label="Phone number"
    type="number"
    kind="phone"
    required
    register={register("phone")}
  />
</>

물론 모든 컴포넌트를 다 dynamic으로 하지는 마라. 그럼 로딩이 오히려 이상해지겠지.

19.3 Lazy-load Imports 
만약 Dynamic import가 너무 오래걸린다면? 
loader 컴포넌트를 줄 수 있다.
3초동안 컴포넌트를 불러오는 동안, 옵션을 줄 수 있다.
아래는 dynamic 함수 사용하는거고.

const Bs = dynamic(
   () =>
     new Promise((resolve) =>
       setTimeout(() => resolve(import("@components/bs")), 3000)
     ),
   { ssr: false, loading: () => <span>Loading a big component for you!</span> }
 );

아래는 React18 부터 도입된 suspense기능을 사용하기 위한 설정.
true로 해놓으면 됨. 그리고 컴포넌트를 엘리먼트 부분에서 컨트롤 하는거

const Bs = dynamic(
  () =>
    new Promise((resolve) =>
      setTimeout(() => resolve(import("@components/bs")), 3000)
    ),
  { ssr: false, suspense: true }
);
 <>
  <Suspense fallback={<span>Loading something big</span>}>
    <Bs />
  </Suspense>
  <Input
    name="phone"
    label="Phone number"
    type="number"
    kind="phone"
    required
    register={register("phone")}
  />
</>