Next.js에서 성능과 Core Web Vitals는 어떻게 최적화하나요?

Question

Accepted Answer

Next.js는 많은 성능 도구를 제공합니다. 이들을 잘 사용하면 **Core Web Vitals** — LCP(로딩), CLS(레이아웃 안정성), INP(상호작용성) — 를 겨냥할 수 있습니다. ## 클라이언트 JavaScript 최소화 (가장 큰 지렛대) ```tsx // ✅ 컴포넌트를 Server Component로 유지; "use client"는 상호작용형 잎에만 보냄 // Server Component는 자신에 대한 JS를 0으로 보냄 → 더 작은 번들 → 더 나은 INP/로드 ``` App Router의 강점은 더 적은 JS를 보내는 것입니다. 무거운 로직과 데이터 포매팅은 서버에 두고, 진짜 상호작용형 "섬"만 Client Component가 됩니다. ## LCP 이미지 최적화 ```tsx import Image from "next/image";

// priority = 즉시 로드 (LCP 이미지를 lazy-load하지 말 것); width/height는 CLS 방지 ``` ## 폰트 최적화 (CLS + 로드) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // 셀프 호스팅, 레이아웃 시프트 없음 ``` ## 무거운 클라이언트 컴포넌트 코드 스플리팅 ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // 필요할 때만 로드 ``` 크고 중요하지 않은 클라이언트 컴포넌트(차트, 에디터, 모달)를 lazy-load하여 초기 번들을 부풀리지 않게 하세요. ## 느린 콘텐츠 스트리밍 ```tsx }> // 셸을 즉시 보내고 느린 데이터를 스트리밍 → 더 나은 TTFB/FCP ``` ## 공격적으로 캐싱하고 정밀하게 재검증 ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // 정적 속도 + 제어된 신선도 ``` ## 지표에 매핑된 체크리스트 ```text LCP ↓ : next/image + priority, 스트리밍, CDN/정적 캐싱, preconnect CLS ↓ : 이미지 width/height, next/font, 동적 콘텐츠를 위한 공간 예약 INP ↓ : 더 적은 클라이언트 JS (Server Components), 코드 스플리팅, 무거운 이펙트 회피 ``` ## 추측하지 말고 측정하라 ```text next build → 라우트별 JS 크기 확인 Lighthouse / PageSpeed Insights, Web Vitals 라이브러리, Vercel Analytics → 실제 지표 @next/bundle-analyzer → 무엇이 번들을 부풀리는지 찾기 ``` ## 왜 중요한가 Next.js 성능은 대부분 **더 적은 JavaScript를 보내는 것**(Server Components, 코드 스플리팅)과 내장 최적화 도구(`next/image`, `next/font`, 스트리밍, 캐싱)를 사용하는 것입니다. 각각이 Core Web Vital에 직접 매핑됩니다. 어떤 도구가 어떤 지표를 고치는지 알고, 추측이 아니라 `next build`/Lighthouse로 측정하는 것이 좋은 LCP/CLS/INP 점수를 체계적으로 달성하는 방법입니다.