Next.js 기초 <17. Next.js 15에서 성능 최적화 및 코드 스플리팅>

넥스트 Next.js

17. Next.js 15에서 성능 최적화 및 코드 스플리팅 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 성능 최적화가 중요한 이유

Next.js는 기본적으로 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 코드 스플리팅 등 다양한 성능 최적화 기능을 제공한다.
하지만, 추가적인 최적화를 적용하면 더욱 빠른 페이지 로딩과 최적의 사용자 경험(UX)을 제공할 수 있다.

📌 Next.js 15에서 성능 최적화를 적용해야 하는 이유
✔ 페이지 로딩 속도 개선 → 사용자 이탈률 감소
✔ SEO 최적화 → 검색 엔진에서 높은 랭킹 유지
✔ 사용자 경험 향상 → 부드러운 인터랙션 제공
✔ 서버 리소스 절약 → 불필요한 API 요청 및 데이터 로딩 최소화

✅ Next.js 15 성능 최적화 주요 기법 비교

최적화 방법설명장점단점

코드 스플리팅 (Code Splitting)	필요할 때만 JS 로드	✅ 초기 로딩 속도 개선	❌ 코드 분할 전략 필요
이미지 최적화 (next/image)	자동 이미지 최적화	✅ 페이지 속도 향상	❌ 외부 도메인 설정 필요
Lazy Loading	필요한 데이터만 로딩	✅ 네트워크 부하 감소	❌ 초기 렌더링 시 고려 필요
서버 사이드 렌더링 (SSR)	서버에서 HTML을 생성 후 전달	✅ SEO 최적화	❌ 서버 부하 증가 가능
정적 사이트 생성 (SSG)	빌드 시 HTML 파일 생성	✅ 빠른 로딩	❌ 데이터 변경 시 재배포 필요

📌 Next.js 15에서는 "코드 스플리팅 + Lazy Loading + 이미지 최적화" 조합이 가장 많이 사용됨!

---

2. Next.js 15에서 코드 스플리팅 적용하기

✅ 1) 동적 import (next/dynamic) 활용 (app/components/DynamicComponent.tsx)

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("./HeavyComponent"), { ssr: false });

export default function Home() {
  return (
    <main>
      <h1>🚀 Next.js 15 코드 스플리팅</h1>
      <HeavyComponent />
    </main>
  );
}

📌 Next.js의 dynamic()을 사용하면 필요할 때만 해당 컴포넌트를 로드하여 초기 번들 크기를 줄일 수 있음!

✅ 2) React.lazy와 Suspense 활용 (app/components/LazyComponent.tsx)

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

const LazyComponent = lazy(() => import("./HeavyComponent"));

export default function Home() {
  return (
    <main>
      <h1>🚀 React.lazy를 활용한 코드 스플리팅</h1>
      <Suspense fallback={<p>로딩 중...</p>}>
        <LazyComponent />
      </Suspense>
    </main>
  );
}

📌 React의 lazy()와 Suspense를 활용하여 코드 로딩을 지연시킬 수 있음!

✅ 3) 페이지 단위 코드 스플리팅 (app/[locale]/about/page.tsx)

export default function AboutPage() {
  return (
    <main>
      <h1>📄 Next.js 15 페이지 단위 코드 스플리팅</h1>
      <p>이 페이지는 코드 스플리팅이 적용되어 필요할 때만 로드됩니다.</p>
    </main>
  );
}

📌 Next.js는 기본적으로 페이지 단위 코드 스플리팅을 자동으로 수행!

---

✅ 여기까지 Next.js 15에서 코드 스플리팅을 적용하는 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 Lazy Loading을 적용하면 어떻게 성능이 개선될까?"
✅ 2부에서 Lazy Loading과 성능 최적화를 위한 추가 기법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. Next.js 15에서 Lazy Loading 적용하기

✅ 1) 이미지 Lazy Loading (next/image 사용)

import Image from "next/image";

export default function LazyImage() {
  return (
    <Image src="/images/large-image.jpg" alt="Lazy Load Example" width={800} height={600} loading="lazy" />
  );
}

📌 이미지에 loading="lazy" 속성을 추가하면 필요할 때만 로드됨!

✅ 2) Intersection Observer를 활용한 Lazy Loading (app/components/LazyLoadComponent.tsx)

"use client";
import { useEffect, useState, useRef } from "react";

export default function LazyLoadComponent() {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

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

    if (ref.current) observer.observe(ref.current);
  }, []);

  return <div ref={ref}>{isVisible ? <p>✅ Lazy Loaded Content!</p> : <p>⏳ 로딩 중...</p>}</div>;
}

📌 Intersection Observer를 사용하여 화면에 보일 때만 데이터를 로드할 수 있음!

---

2. Next.js 15에서 불필요한 코드 제거 (Tree Shaking)

✅ 1) 사용하지 않는 코드 제거 (next.config.js 설정)

/** @type {import('next').NextConfig} */
const nextConfig = {
  optimizeFonts: true,
  experimental: {
    optimizeCss: true,
  },
};

module.exports = nextConfig;

📌 Tree Shaking을 활성화하여 사용하지 않는 CSS 및 JS 코드를 제거 가능!

✅ 2) process.env.NODE_ENV를 활용한 개발/배포 코드 분리

if (process.env.NODE_ENV === "development") {
  console.log("개발 환경입니다!");
}

 

📌 배포 환경에서는 개발 관련 코드가 제거되어 번들 크기를 줄일 수 있음!

---

3. Next.js 15에서 Lighthouse를 활용한 성능 측정

✅ Lighthouse 성능 점수 분석 방법

1️⃣ Chrome DevTools → Lighthouse 탭 열기
2️⃣ "Performance", "SEO", "Accessibility" 선택 후 Analyze 클릭
3️⃣ 개선이 필요한 항목 (이미지 최적화, 코드 스플리팅 등) 확인
4️⃣ 권장되는 성능 최적화 적용 후 다시 테스트

📌 Lighthouse 점수가 90점 이상이면 SEO 및 UX에 긍정적인 영향을 미침!

---

✅ 여기까지 Next.js 15에서 Lazy Loading, Tree Shaking, Lighthouse 성능 분석 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 Vercel을 활용하여 배포 및 CDN 최적화는 어떻게 할까?"
✅ 다음 회차에서 Next.js 15에서 Vercel 배포 및 CDN 최적화 방법을 배워봅시다!