next/dynamic과 Lazy Loading을 알아보자

서버사이드 렌더링을 하는데 클라이언트사이드 렌더링 환경에서만 돌아가는 코드를 실행해보려고 한 적 있으신가요?!

오류를 만납니다 빨강빨강!!!!

 

이런 경우에 next/dynamic 패키지를 사용해 레이지 로딩 처리하면 간단하게 해결 가능해요!!! 알아보죠!

---

Lazy Loading

• 리소스를 필요한 경우에만 불러오는 전략
• 필요한 경우에만 불러오기 때문에 초기 로딩 속도를 향상시킬 수 있다.!

ex)

이미지가 100장 있다고 친다면 100장을 다 불러오려고 하는데 사용자 경험이 매우 나빠질 것이다.

하지만 사용자가 보는 가시영역만 불러온다면? 속도가 빠를 수 있을 것이다.

이런식으로 필요할 때 불러오는게 Lazy Loading

 

이미지나 라이브러리 컴포넌트 단위로도 Lazy Loading이 가능하다.

• 필요 시 로드
  • 사용자가 특정 기능이나 콘텐츠를 요청할 때만 해당 리소스를 로드 가능
    초기 로딩 시간을 단축
• 분할 로드
  • 웹 애플리케이션의 전체 코드를 한 번에 로드하는 것이 아니라, 필요한 부분만 분할하여 로드 가능
    불필요한 리소스 로딩을 방지할 수 있다
• 지연 로드
  • 사용자가 실제로 필요한 시점까지 리소스 로드를 지연하는 것이 가능하다

---

next/dynamic

• 동적으로 컴포넌트를 로드하는 데 사용
• Lazy Loading 기술을 구현 가능하게 한다

import dynamic from 'next/dynamic';

// 동적으로 로드할 컴포넌트
const BigComponent = dynamic(() => import('../components/BigComponent'), {
  //서버사이드에서 렌더링을 할지 말지 여부 기본값은 true
  {ssr: false}
});

// 페이지 컴포넌트
const MyPage = () => {
  return (
    <div>
      <h1>My Page</h1>
      <BigComponent />
    </div>
  );
};

export default MyPage;

// BigComponent 위에 또다른 많은 컴포넌트 들이 있다면 
// 전체 컴포넌트를 불러오는 것은 비효율적
// 그러므로 다이나믹을 사용하여 필요할 때 동적으로 불러오게 되면 
// 사용자 경험이 향상될 수 있다.

 

물론 제 설명이 부족한 것 알고 있습니다!!

간단하게 알아 갈 수 있도록 정리한 것이고 자세히 알고 싶으시면 넥스트/다이나믹

 

Optimizing: Lazy Loading | Next.js

링크로 들어가서 보시면 조금더 자세할 설명을 보실 수 있습니다.!