React.lazy

Creator

Creator

Seonglae Cho

Created

Created

2024 Feb 11 3:58

Editor

Editor

Seonglae Cho

Edited

Edited

2024 Feb 11 4:1

Refs

Refs

Next.js dynamic()

Client-Side Code Splitting: React.lazy is a React feature introduced in version 16.6 that allows you to render a dynamic import as a regular component. It is primarily used for code splitting and lazy loading components in the client-side environment.

Suspense Integration: It must be used in conjunction with the Suspense component, which lets you specify the loading indicator while the lazy-loaded component is being fetched.

Limitations: React.lazy and Suspense are not yet available for server-side rendering in React. This means that if you're using React.lazy in a Next.js project, the lazy-loaded components will only be split and lazy-loaded in the client-side bundle, not during SSR.

Code splitting with React.lazy and Suspense

The React.lazy method makes it easy to code-split a React application on a component level using dynamic imports. Use it along with Suspense to show appropriate loading states to your users.

Code splitting with React.lazy and Suspense

https://web.dev/code-splitting-suspense/?utm_source=lighthouse&utm_medium=devtools

Code splitting with React.lazy and Suspense

코드 분할 - React

대부분 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다. 예시 App Bundle 주의 실제 번들은 위 예시와는 많이 다르게 보일 겁니다. Create React App이나 Next.js, Gatsby 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.

https://ko.reactjs.org/docs/code-splitting.html

코드 분할 - React

Recommendations

////////////