최적화를 위한 Next.js 코드 스플리팅

코드 스플리팅이란?

특정페이지에서 JS, 라이브러리, 페이지, 컴포넌트를 비동기적으로 렌더링을 해줍니다. 초기 렌더링시 초반에 불필요한 JS, 라이브러리, 페이지 등은 코드 스플리팅을 통해서 나중에 들고오기 때문에 성능적인면에서도 아주 매력적으로 다가오게 됩니다.

 

코드 스플리팅은 말그대로 이다. 코드를 분리시킨다 의미가 강하게 내포되어 있는거 처럼, 이 기능은 코드를 비동기적으로 로딩하는 방법을 만들어 줍니다. 나는 주로 차트 개발을 하면서 한번에 데이터를 들고와 chart를 뿌리는 작업을 하면서 렌더링 이슈를 많이 접하곤 했었다. (물론 한참 오래전인 2022년 이야기이다.)

이러한 차트를 뿌리기 위해서는 데이터도 그만큼 상당하기도 하고 UI 차트들이 많이 차지하는 만큼 렌더링이 버벅 거리는 이슈와 느린 이슈가 찾아왔었다. 내가 마침 Next.js를 개발하면서 코드스플리팅이라는 기술 적용을 시키게 되면서 렌더링 이슈를 한번에 해결하게 되었다.

 

next/dynamic

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

Optimizing: Lazy Loading | Next.js

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})
 
export default function Home() {
  return <DynamicHeader />
}

코드의 사용예제는 매우 간단하게 되어있다. 위에 코드를 보시면 import를 하여 로딩 되고 있을땐, <p>Loading...</p>화면 처리가 될 것이며, 로딩이 다 되고나서는 자동 렌더링 처리를 할 수 있습니다.

 

위에 기술이 코드스플리팅이라고 이야기하기보단, 로딩지연 의미가 강하긴하다. 하여튼 이러한 코드 스플리팅 기술을 이용하여 아래의 사례를 정리해보려고합니다.

 

코드스플리팅 사례

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Routing: Loading UI and Streaming | Next.js

이미 자료는 충분이 있다고 생각하지만, 여기에서 나의 사례를 조금 붙여서 이야기하자면...

위에 이미지처럼 하나하나의 컴포넌트를 다 lazy loading를 처리를하여 코드스플리팅 처리를 하였습니다. 아래 이미지를 보시면 위에 이미지처럼 컴포넌트 단위를 조금 더 세부적으로 나누어서 lazy loading처리를 해버리는 것입니다.

 

그렇게 되었을때는 api를 다 따로 호출하기에 api가 가장 빠르게 처리되는 것은 loading... 이 잠시 뜨긴하더라도 빠르게 렌더링이 처리가 됩니다. 이처럼 나는 이렇게 코드 스플리팅으로 클라이언트 화면을 조금더 최적의 상태로 만들어 드렸으며, 초기 화면속도가 빨라 사용하는데는 불편함이 없었다.