2024년을 맞이하는 Next.js 애플리케이션 초고속 최적화 전략

Next.js의 성능 최적화: 웹 애플리케이션을 10배 빠르게 하는 방법

Next.js는 반응형 웹과 서버 사이드 렌더링(SSR)의 장점을 결합한 강력한 프레임워크입니다. 그러나 앱이 성장함에 따라 성능을 최상으로 유지하는 것이 중요합니다. 이번 글에서는 Next.js 애플리케이션을 10배 빠르게 할 수 있는 다양한 전략을 코드 예제와 성능 지표와 함께 살펴보겠습니다.

서버 사이드 렌더링(SSR) vs 정적 사이트 생성(SSG)

Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 점진적 정적 재생성(ISR) 사이에서 선택할 수 있는 유연성을 제공합니다. 앱을 더 빠르게 만들기 위해서는 가능한 한 SSG를 사용하는 것이 좋습니다.

코드 예제: 정적 사이트 생성

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return <div>{data.message}</div>;
}

사용 시기

• SSR: 사용자 맞춤형 콘텐츠(예: 개인 대시보드)를 위한 경우.
• SSG: 정적이고 공개적인 페이지(예: 블로그, 랜딩 페이지)를 위한 경우.

성능 지표

• SSR: 초기 로드는 느리지만 더 동적입니다.
• SSG: 매우 빠른 로드 시간을 자랑하지만, 동적 콘텐츠에 대한 유연성이 적습니다.

API 호출 최적화와 getServerSideProps 활용하기

Next.js에서 API 호출은 종종 getServerSideProps를 사용하여 서버에서 처리됩니다. 이는 페이지가 렌더링 되기 전에 데이터.fetching을 보장하여 사용자 경험을 향상시킵니다.

코드 예제: 효율적인 API 호출

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

성능 팁

• 여러 개의 API 호출을 하나의 요청으로 결합하거나 병렬로 fetch 요청을 사용하여 대기 시간을 줄이세요.

성능 지표

• 축소된 API 응답 시간: 더 적고 효율적인 API 요청으로 페이지 로드를 빠르게 만듭니다.
• 병렬 요청: 여러 요청을 결합하여 효율성을 높입니다.

Next.js 이미지 최적화 활용하기

Next.js는 자동으로 이미지 최적화를 수행하고, 이를 통해 성능을 크게 향상시킬 수 있습니다. 이미지가 종종 가장 무거운 자산이기 때문에 이는 필수적입니다.

코드 예제: 이미지 컴포넌트

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <Image
        src="/example.jpg"
        alt="Example"
        width={500}
        height={300}
      />
    </div>
  );
}

성능 지표

• 최적화된 이미지: 자동 압축과 지연 로딩을 사용하여 이미지 크기를 60%까지 줄일 수 있습니다.

컴포넌트 지연 로딩

복잡한 UI 또는 무거운 컴포넌트를 가진 페이지에서는 필요한 경우에만 컴포넌트를 로드함으로써 성능을 크게 개선할 수 있습니다.

코드 예제: 지연 로딩 컴포넌트

import dynamic from 'next/dynamic';

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

export default function Home() {
  return <div>{HeavyComponent && <HeavyComponent />}</div>;
}

성능 지표

• 지연 로딩을 통해 초기 번들 크기를 30%까지 줄이고, 첫 번째 콘텐츠 페인트(FCP)를 빠르게 할 수 있습니다.

next/link를 사용하여 링크 미리 가져오기

Next.js의 컴포넌트를 사용하면 페이지가 자동으로 미리 가져와지며, 이는 페이지 간의 탐색을 빠르게 만들어 줍니다.

코드 예제: 링크 미리 가져오기

import Link from 'next/link';

export default function Home() {
  return (
    <Link href="/about">
      <a>About 페이지로 이동</a>
    </Link>
  );
}

성능 지표

• 미리 가져오기를 통해 탐색 시간을 50%까지 줄일 수 있어 보다 매끄러운 사용자 경험을 제공합니다.

콘텐츠 전달 네트워크(CDN) 사용하기

Next.js 애플리케이션을 CDN을 사용하여 배포하면 앱이 사용자에게 가장 가까운 서버에서 제공되어 지연 시간을 크게 줄여줍니다.

성능 지표

• CDN은 지연 시간을 최대 80%까지 줄여, 전 세계적으로 빠른 로딩 시간을 제공합니다.

코드 분할 및 번들 분석기

Next.js는 애플리케이션을 자동으로 코드 분할하여, 필요에 따라 페이지에만 필요한 코드가 로드됩니다. Next.js 번들 분석기를 사용하여 앱의 번들 크기를 시각화하고 최적화할 수 있습니다.

번들 분석기 설치

npm install @next/bundle-analyzer

next.config.js에서 설정하기

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

성능 지표

• 코드 분할은 번들 크기를 20-50% 줄여 초기 로드 시간을 빠르게 합니다.

SWC 컴파일러로 캐싱 최적화하기

Next.js는 빠른 빌드와 캐싱을 위해 SWC 컴파일러를 사용합니다. 추가적으로 최적화를 위해 서버에서 캐싱을 올바르게 구성해야 합니다.

성능 지표

• 빠른 빌드: SWC는 Babel보다 최대 70% 빠른 빌드를 제공합니다.
• 향상된 캐싱은 중복된 데이터 가져오기를 줄여 응답 시간을 개선합니다.

Next.js로 폰트 최적화하기

사용자 정의 폰트는 최적화되지 않으면 성능을 저하시킬 수 있습니다. Next.js는 효율적으로 폰트를 로드할 수 있는 내장 폰트 최적화를 제공합니다.

코드 예제: 폰트 최적화

export default function Home() {
  return (
    <style jsx global>{`
      @font-face {
        font-family: 'CustomFont';
        src: url('/fonts/CustomFont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
    `}</style>
  );
}

성능 지표

• font-display: swap을 사용하면 폰트 로드 시간을 30% 줄일 수 있습니다.

최적화를 위한 서드파티 도구 사용하기

다음과 같은 도구를 사용하여 Next.js 애플리케이션의 성능을 개선할 수 있습니다:

• Vercel Analytics: Next.js 애플리케이션의 성능 모니터링을 제공합니다.
• Lighthouse: 애플리케이션 성능을 분석하기 위한 Google 도구입니다.
• Web Vitals: 가장 큰 콘텐츠 페인트(LCP), 누적 레이아웃 이동(CLS), 첫 번째 입력 지연(FID)과 같은 지표로 애플리케이션이 빠른지 확인합니다.

성능 지표

• Lighthouse와 같은 도구는 개선할 부분을 식별하는 데 도움을 주며, Lighthouse 점수를 90 이상으로 올릴 수 있습니다.

성능 비교

아래는 최적화 전후의 주요 지표 성능 비교입니다:

메트릭	최적화 전	최적화 후
첫 번째 콘텐츠 페인트(FCP)	1.8초	0.8초
가장 큰 콘텐츠 페인트(LCP)	2.6초	1.1초
총 차단 시간(TBT)	300ms	100ms
누적 레이아웃 이동(CLS)	0.20	0.05

결론

Next.js 애플리케이션을 최적화하면 사용자 경험과 성능을 크게 향상시킬 수 있습니다. 위에서 소개한 전략을 통해 여러분의 프로젝트를 더욱 효율적으로 개선해 보세요.

참고: Next.js 공식 문서, Vercel, Lighthouse

---

위의 내용을 바탕으로 다음 URL들을 참고하면 더 도움이 될 것입니다:

• React 공식 문서
• Next.js 최적화 지침서