nextjs

[hmu332233]

keyword suspense,ssr

[hmu332233]

next/dynamic을 사용해서 lazy 로딩시 fallback 처리 방법

// pre rendering 단계에서 Loading 컴포넌트 표시됨
const Component = dynamic(() => import('Component'), {
  loading: () => (<Loading />),
  ssr: false,
});

<Component />

// pre rendering 단계에서 Component 컴포넌트 표시됨
const Component = dynamic(() => import('Component'), {
  suspense: true
});

<Suspense fallback={<Loading />}>
  <Component />
</Suspense>