🚀 Next.js에서 Lazy Loading 구현 가이드

🚀 Next.js에서 Lazy Loading 구현 가이드

Next.js는 성능 최적화를 위해 컴포넌트, 이미지, 외부 스크립트 등을 지연 로딩(Lazy Loading) 할 수 있는 다양한 방법을 제공합니다.
이 가이드는 App Router 환경에서 Lazy Loading을 적용하는 모든 방법을 정리합니다.

---

✅ 1. next/dynamic을 활용한 컴포넌트 Lazy Loading

Next.js의 next/dynamic 함수는 컴포넌트를 동적으로 로드할 수 있는 대표적인 방법입니다.

'use client';
import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('./components/LazyComponent'), {
  loading: () => <p>로딩 중...</p>,
  ssr: false, // 서버 사이드 렌더링 비활성화
});

export default function Page() {
  return (
    <div>
      <h1>메인 페이지</h1>
      <LazyComponent />
    </div>
  );
}

옵션 설명

loading	로딩 중 보여줄 컴포넌트
ssr: false	클라이언트에서만 로딩하도록 설정

---

✅ 2. React.lazy + Suspense

React의 공식 기능을 그대로 활용할 수 있으며, Suspense를 통해 로딩 중 UI를 표시합니다.

'use client';
import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./components/LazyComponent'));

export default function Page() {
  return (
    <Suspense fallback={<p>로딩 중...</p>}>
      <LazyComponent />
    </Suspense>
  );
}

App Router에서는 대부분 next/dynamic을 사용하는 것이 더 권장됩니다.

---

✅ 3. 이미지 Lazy Loading

반응형

Next.js의 next/image 컴포넌트는 기본적으로 Lazy Loading이 적용되어 있습니다.

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/images/banner.jpg"
      alt="Banner"
      width={800}
      height={500}
    />
  );
}

중요한 이미지에는 priority 속성을 추가하여 즉시 로딩되도록 설정할 수 있습니다.

<Image src="/hero.jpg" alt="Hero" width={1200} height={700} priority />

---

✅ 4. Intersection Observer 기반 Lazy Loading

브라우저의 IntersectionObserver API를 활용하면 뷰포트에 들어왔을 때만 로딩하는 방식도 구현 가능합니다.

'use client';
import { useEffect, useRef, useState } from 'react';
import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('./components/LazyComponent'), { ssr: false });

export default function Page() {
  const ref = useRef(null);
  const [show, setShow] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setShow(true);
        observer.disconnect();
      }
    });

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div>
      <h1>Intersection Observer 예제</h1>
      <div ref={ref}>{show && <LazyComponent />}</div>
    </div>
  );
}

---

✅ 5. 라우트 기반 Lazy Loading

Next.js는 기본적으로 각 페이지마다 코드 스플리팅이 적용됩니다.
따라서 페이지 전환 시, 해당 페이지의 코드만 로드됩니다.

import Link from 'next/link';

<Link href="/about">About 페이지 이동</Link>

기능 설명

기본 prefetch	페이지 진입 전에 코드 미리 로딩됨
비활성화	<Link prefetch={false} />

---

✅ 6. 외부 스크립트 Lazy Loading

next/script 컴포넌트를 사용하여 외부 스크립트를 지연 로딩할 수 있습니다.

import Script from 'next/script';

strategy 설명

beforeInteractive	Next.js 코드보다 먼저 로딩
afterInteractive	기본값, 렌더 이후 로딩
lazyOnload	브라우저 유휴 상태에서 로딩

---

✅ 요약

항목 적용 방법

컴포넌트 Lazy Loading	next/dynamic, React.lazy + Suspense
이미지 Lazy Loading	next/image (기본 적용됨)
Intersection Observer 활용	특정 뷰포트 진입 시 로딩
라우트 기반 Lazy Loading	자동 코드 스플리팅 적용
외부 스크립트 Lazy Loading	next/script의 strategy 속성 사용

---

 

Next.js, Lazy Loading, 코드 스플리팅, 퍼포먼스 최적화, 이미지 최적화, React Suspense, next/dynamic, Intersection Observer, Script Lazy Load, SEO 최적화, App Router