태그
  • nextjs
  • route
목차

프로덕션 체크리스트

생성일: 2024-05-05

수정일: 2024-05-05

Next.js 애플리케이션을 프로덕션 환경에 배포하기 전에 최상의 사용자 경험, 성능 및 보안을 위해 고려해야 할 최적화와 패턴이 있다.

이 페이지에서는 애플리케이션을 구축할 때, 프로덕션에 배포하기 전, 그리고 배포 후에 참조할 수 있는 모범 사례와 인지해야 할 자동 Next.js 최적화에 대해 설명한다.

자동 최적화

다음은 따로 설정할 필요 없이 기본적으로 활성화되어 있는 Next.js 최적화 기능이다:

이러한 기본값은 애플리케이션의 성능을 향상시키고 각 네트워크 요청에서 전송되는 데이터의 비용과 양을 줄이는 것을 목표로 합니다.

개발 중

애플리케이션을 개발하는 동안 최상의 성능과 사용자 경험을 보장하기 위해 다음 기능을 사용하는 것이 좋다:

라우팅 및 렌더링

Tip

부분 프리렌더링(실험적)은 전체 경로를 동적 렌더링으로 옵트인하지 않고도 경로의 일부를 동적으로 만들 수 있게 해준다.

데이터 가져오기 및 캐싱

UI 및 접근성

보안

메타데이터 및 SEO

타입 안전성

프로덕션에 배포하기 전에

프로덕션에 배포하기 전에 next build 를 실행하여 애플리케이션을 로컬로 빌드하고 빌드 오류를 잡을 수 있다. 그런 다음 next start 를 실행하여 프로덕션과 유사한 환경에서 애플리케이션의 성능을 측정할 수 있다.

Core Web Vitals

프로덕션 환경에서 애플리케이션의 성능을 평가하고 개선하기 위해 Lighthouse와 Core Web Vitals를 활용하는 것이 중요하다.

Lighthouse는 Google에서 제공하는 오픈소스 자동화 도구로, 웹 페이지의 품질을 평가하고 개선 방안을 제안한다. 다음과 같은 영역에 대한 평가를 수행한다:

  1. 성능: 페이지 로딩 속도, 상호 작용성, 시각적 안정성 등을 측정한다.
  2. 접근성: 웹 콘텐츠 접근성 지침(WCAG)을 기반으로 접근성 문제를 식별한다.
  3. 모범 사례: 웹 개발 모범 사례 준수 여부를 평가한다.
  4. SEO: 검색 엔진 최적화에 도움이 되는 요소를 확인한다.

Lighthouse를 시크릿 모드(시크릿 창, 익명 모드)에서 실행하는 이유는 브라우저 확장 프로그램, 캐시된 데이터 등의 영향을 받지 않고 사용자가 사이트를 처음 경험할 때의 상태를 시뮬레이션하기 위해서다. 이를 통해 실제 사용자 경험에 더 가까운 결과를 얻을 수 있다.

Lighthouse 테스트는 시뮬레이션된 환경에서 이루어지므로, 실제 사용자 데이터와 함께 분석해야 한다. 이때 중요한 것이 Core Web Vitals이다.

Core Web Vitals는 Google에서 정의한 웹 페이지 성능 지표로, 사용자 경험을 측정하는 핵심 요소다. 다음 세 가지 지표로 구성된다:

  1. Largest Contentful Paint (LCP): 페이지의 주요 콘텐츠가 로드되는 데 걸리는 시간을 측정한다.
  2. First Input Delay (FID): 사용자가 페이지와 처음 상호 작용할 때 브라우저가 응답하기까지의 지연 시간을 측정한다.
  3. Cumulative Layout Shift (CLS): 페이지 로딩 중에 발생하는 예기치 않은 레이아웃 이동의 정도를 측정한다.

Next.js에서는 useReportWebVitals 훅을 제공하여 Core Web Vitals 데이터를 분석 도구로 쉽게 전송할 수 있다. 이 훅을 사용하면 Google Analytics, Vercel Analytics 등의 분석 도구에 성능 데이터를 전송할 수 있다.

예를 들어, 다음과 같이 useReportWebVitals 훅을 사용할 수 있다:

import { useReportWebVitals } from 'next/vitals';

function App() {
  useReportWebVitals((metrics) => {
    console.log(metrics);
    // 분석 도구로 데이터 전송
  });

  // ...
}

export default App;

위 코드에서는 useReportWebVitals 훅을 사용하여 Core Web Vitals 데이터를 수집하고, 콘솔에 출력하거나 분석 도구로 전송할 수 있다.

Lighthouse와 Core Web Vitals를 함께 활용하면 애플리케이션의 성능을 종합적으로 평가하고 개선할 수 있다. Lighthouse는 시뮬레이션된 환경에서 페이지 품질을 평가하고 개선 방안을 제안하는 반면, Core Web Vitals는 실제 사용자 경험을 측정하는 데 도움이 된다. 이 두 가지 도구를 함께 사용하여 사용자에게 최적의 경험을 제공할 수 있다.

번들 분석

번들 분석은 애플리케이션 성능 최적화에 있어 중요한 단계다. 번들 크기가 클수록 로딩 시간이 길어지고 사용자 경험에 부정적인 영향을 미칠 수 있기 때문이다. Next.js에서는 @next/bundle-analyzer 플러그인을 사용하여 번들 분석을 수행할 수 있다.

@next/bundle-analyzer 플러그인은 웹팩 번들 분석기를 Next.js에 통합하여 번들 크기와 구성을 시각화해준다. 이 플러그인을 사용하면 다음과 같은 작업을 수행할 수 있다:

  1. 번들 크기 확인: 각 번들의 크기를 확인하여 애플리케이션의 전체 크기를 파악할 수 있다.
  2. 대형 모듈 식별: 번들 내에서 크기가 큰 모듈을 식별하여 최적화 대상을 찾을 수 있다.
  3. 중복 코드 발견: 여러 번들에서 중복되는 코드를 찾아 제거할 수 있다.
  4. 사용하지 않는 코드 제거: 번들에 포함되었지만 실제로 사용되지 않는 코드를 식별하여 제거할 수 있다.

@next/bundle-analyzer 플러그인을 사용하려면 먼저 설치해야 한다:

npm install --dev @next/bundle-analyzer

그런 다음 next.config.js 파일에서 플러그인을 설정다:

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

module.exports = withBundleAnalyzer({
  // 다른 Next.js 구성 옵션
});

위 코드에서는 ANALYZE 환경 변수가 'true'로 설정된 경우에만 번들 분석기가 활성화된다.

이제 다음 명령을 실행하여 번들 분석을 수행할 수 있다:

ANALYZE=true npm run build

위 명령을 실행하면 Next.js 애플리케이션이 빌드되고, 번들 분석 결과가 웹 브라우저에 표시된다. 이를 통해 번들 크기와 구성을 시각적으로 확인할 수 있다.

번들 분석 외에도 애플리케이션에 새로운 종속성을 추가할 때 미치는 영향을 이해하는 것이 중요하다. 다음 도구들은 이러한 분석에 도움이 될 수 있다:

  1. Import Cost: VS Code 확장 프로그램으로, 코드 편집기에서 직접 가져오기 문 옆에 번들 크기를 표시해준다.
  2. Package Phobia: npm 패키지의 크기와 종속성을 분석하는 웹 도구다.
  3. Bundle Phobia: npm 패키지를 번들링했을 때의 크기를 보여주는 웹 도구다.
  4. bundlejs: 웹 애플리케이션의 번들을 분석하고 최적화하는 데 도움이 되는 CLI 도구다.

이러한 도구를 활용하면 종속성 추가로 인한 번들 크기 증가를 사전에 파악하고, 대안을 모색할 수 있다. 예를 들어, 유사한 기능을 제공하는 더 가벼운 라이브러리로 교체하거나, 불필요한 종속성을 제거할 수 있다.

번들 분석과 종속성 영향 분석을 통해 애플리케이션의 성능을 지속적으로 모니터링하고 개선할 수 있다. 이는 사용자 경험 향상과 직결되므로 프로덕션 배포 전후로 수행하는 것이 좋다.

배포 후

애플리케이션을 프로덕션 환경에 배포한 후에는 지속적인 모니터링과 개선이 필요하다. 배포 플랫폼마다 제공하는 도구와 통합 기능이 다르므로, 해당 플랫폼에서 제공하는 기능을 적극 활용하는 것이 좋다.

Vercel은 Next.js 애플리케이션 배포에 최적화된 플랫폼으로, 다양한 모니터링 및 분석 도구를 제공한다. Vercel에서 제공하는 주요 기능은 다음과 같다:

  1. 분석(Analytics):
    • Vercel의 내장 분석 대시보드는 애플리케이션의 트래픽과 사용자 행동에 대한 인사이트를 제공한다.
    • 방문자 수, 페이지 조회수, 참조 소스, 지리적 위치 등 다양한 메트릭을 확인할 수 있다.
    • 이를 통해 사용자 경험을 이해하고 개선 영역을 파악할 수 있다.
  2. 속도 인사이트(Speed Insights):
    • 속도 인사이트는 실제 사용자 데이터를 기반으로 웹사이트의 성능을 분석한다.
    • 페이지 로딩 속도, 상호 작용 시간 등 핵심 성능 지표를 제공하여 사용자 경험을 평가할 수 있다.
    • 문제가 되는 영역을 식별하고 최적화 작업을 수행할 수 있다.
  3. 로깅(Logging):
    • Vercel은 애플리케이션의 런타임 로그와 활동 로그를 제공한다.
    • 런타임 로그를 통해 애플리케이션에서 발생하는 오류와 경고를 확인하고 문제를 신속하게 해결할 수 있다.
    • 활동 로그는 배포, 빌드, 설정 변경 등 주요 이벤트를 기록하여 변경 사항을 추적할 수 있다.

Vercel 외에도 다양한 타사 도구와 서비스를 활용하여 애플리케이션 모니터링 및 분석을 수행할 수 있다. 예를 들어, Sentry는 실시간 오류 추적 및 모니터링 도구로 널리 사용되며, Google Analytics는 웹 트래픽 분석에 사용된다. Vercel 통합 페이지에서는 다양한 타사 서비스와의 연동 방법을 확인할 수 있다.

프로덕션 배포를 위한 모범 사례를 숙지하고 따르는 것도 중요하다. Vercel은 프로덕션 체크리스트를 제공하여 배포 전후로 고려해야 할 사항을 안내한다. 체크리스트에는 성능 최적화, 보안, 모니터링 등 다양한 주제가 포함되어 있다.

주요 내용은 다음과 같다:

Vercel 프로덕션 체크리스트를 참조하여 배포 과정에서 중요한 사항을 누락하지 않도록 주의해야 한다.

이러한 도구와 모범 사례를 활용하면 Next.js 애플리케이션을 안정적이고 효과적으로 모니터링하고 개선할 수 있다. 사용자에게 최상의 경험을 제공하기 위해서는 배포 이후에도 지속적인 관찰과 최적화가 필요하다.

참조