Next.js 에서는 Page Router를 채택하여 사용하던 시절부터 이미 Lazy Loading을 지원하고 있었다.
Lazy loading in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route.
Lazy loading은 렌더링하는 데 필요한 자바스크립트의 양을 줄임으로써 애플리케이션의 초기 로딩 성능을 향상시키는 데 도움을 줄 수 있다.
여기서 Next.js 측이 제시하는 방법은 두 가지이다.
next/dynamic
에 포함된 dynamic
을 사용하는 방법react.lazy
와 Suspense
를 함께 사용하는 방법