📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 자료 1
• 참고 자료 2

📜 Chapter

‣

Frontend 성능 최적화

‣

lazy

성능 최적화 - Next.js

‣

Suspense

next/dynamic

• next/dynamic
• Next.js는 ES2020의 dynamic import 문법을 지원한다.
• dynamic import를 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러오도록 한다.
• 이를 통해 번들 파일을 분리하고 퍼포먼스 향상을 기대할 수 있다.
• 앱에는 초기 로딩부터 사용하지 않는 부분이 존재할 수 있으며, 또 그 부분의 사이즈가 생각보다 클 수 있기 때문이다.
• 그리고 사용자 언어 등 런타임에서만 알 수 있는 정보에 기반해서 모듈을 선택해야 하는 케이스도 생길 수 있다.
• dynamic import의 공식 문법에서는 import 호출이 promise를 리턴하는 것처럼 코드를 작성한다.
• Next.js의 dynamic import는 import() 구문을 사용하여 코드 분할(Code Splitting)을 구현하는 방법이다.
• Next.js는 import()를 사용하여 외부 라이브러리와 next/dynamic을 통해 React 컴포넌트의 지연 로드를 지원한다.
• 지연 로드는 페이지를 렌더링하는 데 필요한 JavaScript 양을 줄여 초기 로딩 성능을 향상시킨다.
• 컴포넌트나 라이브러리는 사용될 때만 JavaScript 번들에 포함되어 가져온다.
• next/dynamic은 React.lazy와 Suspense의 복합 확장이다. 컴포넌트는 Suspense 경계가 해결될 때까지 수화될 수 있다.