next/dynamic 코드를 분리해주자 ?

☁️개발환경☁️

● Next.js 13 (page router)

 

강의를 보는데 dynamic을 이용해 import를 하면서 " 코드를 분리하면된다. " 라고 말을 하셨다. 

 

도대체 그게 무슨말이지? dynamic은 뭔데? 라는 생각이 들었다.

 

그래서 길지 짧을지 모르는 til을 작성하게 되었다.

 

 ❓ next/dynamic

공식문서에서 dynamic을 검색하니 `react.lazy` 이라고 title에 작성되어있다.

그럼 먼저 Lazy Loading이 뭔지 간단하게 살펴보자.

• next.js에서 lazy loading은 경로 렌더링에 필요한 javaScript의 양을 줄여서 앱의 초기 로딩 성능을 개선하는데 도움이 된다.
• 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시키고 클라이언트 측에서 실행되도록 번들 파일에 포함 할 수 있다.

쉽게 이해한대로 설명해보자면,

 

`react.lazy`

컴포넌트를 지연 로딩할 수 있게 하는 것 이다.

즉, 컴포넌트가 필요할 때 까지 불러오지 않고 기다렸다가 때가 되었을 때 로딩

 

`suspense`

suspense를 사용한 컴포넌트는 lazy 로 로딩된 컴포넌트가 준비될 때까지 보여줄 대체 UI를 지정해 줄 수 있다.

즉, 로딩 스페너 또는 스켈레톤 UI 같은 것들을 보여줄 수 있는 것 이다.

 

이번에는 next/dynamic에 대해 알아보자.

`next/dynamic`

next/dynamic은 react.lazy와 suspense의 합성어라고 하며,

앱과 페이지 디렉토리에서 동일한 방식으로 작동하고 점진적인 마이그레이션을 허용한다고 한다.

 

마찬가지로 이해한대로 설명해보자면,

앱의 여러 부분을 조금씩 동적으로 로딩하게 할 수 있는 것이다. 

 

현재 나의 프로젝트를 예시로 들어보자면

사용자가 버튼을 눌러야지만 보여져야 하는 것들이 있다.

누르기 전까지는 굳이 코드를 읽어낼 필요가 없는 것이다. 해서 dynamic을 이용해 import를 하면

사용자가 어떤 event를 발생하기 전까지는 해당 컴포넌트를 읽지 않고 있다가 

event가 발생했을 때 불러오는 것 이다. 

 

⛑️점진적인 마이그레이션?

    ●  마이그레이션 : 기존의 코드나 시스템을 새로운 구조나 방식으로 변경하는 방법

    ●  점진적: 한 번에 처리하는 것이 아닌 하나씩 차근차근

 

그럼 이제서야 " 코드를 분리해주자 " 라는 말이 이해가 간다. 

사용자가 페이지를 처음 방문할 때 불필요한 코드를 모두 로딩하지 않고,
필요할 때만 필요한 컴포넌트를 로딩할 수 있도록 분리시키는 것 이다.

 

실제로 네트워크 탭에서 처음 화면을 로딩해 봤을때 분리가 되어있는 것을 확인 할 수 있었다...!!

코드 분리 전

 

코드 분리 후

 

 

사용방법은 간단하다!

 

코드 분리전 

import EventBanners from '@/components/home/EventBanners'


export default function Home() {
  return (
    <Container>
      <EventBanners />
      <div css={bold}>Hello</div>
    </Container>
  )
}

 

 

코드 분리 후

import dynamic from 'next/dynamic'

const EventBanners = dynamic(() => import('@/components/home/EventBanners'))

export default function Home() {
  return (
    <Container>
      <EventBanners />
      <div css={bold}>Hello</div>
    </Container>
  )
}

 

 

이번 기회에 dynamic에 대해 잘 이해하고 넘어가게 되어서 기분이 좋다..!!!

 

뭔가 오늘 일기 끝!! 이라고 말해야 할 것 같다..😅

 

 

 

🔖참고 문서

1. Nex.js LazyLoading

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading

Optimizing: Lazy Loading | Next.js