Next.js로 빠른 웹사이트 만들기: 서버 속도 극대화와 클라이언트 부담 최소화

Next.js로 빠른 웹사이트를 만드는 구체적인 최적화 기법을 사용자 여정 세 단계(서버 응답 시간, 페이지 렌더 시간, 사용자 인터랙션)로 나눠 다룬다. React Server Components 활용부터 Partial Prerendering, useOptimistic까지 코드 예시와 벤치마크 수치를 함께 제공한다.

핵심 포인트

서버 응답 최적화: 페이지를 빌드 타임에 정적 생성해 CDN에서 서빙하거나, Partial Prerendering으로 정적 셸과 동적 콘텐츠를 혼합한다.
React Server Components를 활용해 불필요한 JavaScript를 클라이언트에 보내지 않고, Client Component는 컴포넌트 트리의 리프에만 배치한다.
next/image를 통해 자동 포맷 변환, 반응형 서빙, lazy loading을 적용해 이미지 전송 비용을 줄인다.
폰트 파일을 트림(transfonter 도구)해 50% 이상 크기를 줄이고, PageSpeed 99~100 달성 사례를 소개한다.
useOptimistic 훅으로 낙관적 UI를 구현해 서버 응답 대기 없이 즉각적인 인터랙션 피드백을 제공한다.

상세 정리

정적 프리렌더링: 전체 페이지를 빌드 타임에 CDN에 배포해 TTFB를 최소화한다. 데이터가 자주 바뀌지 않는 페이지에 최적이다.
Partial Prerendering(PPR): 정적 라우트 셸을 미리 생성하고 동적 콘텐츠만 스트리밍으로 채운다. 정적과 동적의 하이브리드 접근이다.
캐싱과 재검증: fetch 요청에 revalidate 파라미터를 설정해 캐시 유효 시간을 제어하고, 이벤트 트리거 재검증으로 데이터 변경 시 즉시 갱신한다.
React Server Components: 서버에서만 실행되는 컴포넌트로 DB 쿼리와 API 호출을 처리해 클라이언트 JavaScript 번들 크기를 줄인다.
Client Component 배치 원칙: 트리의 리프에만 배치한다. 상위에 두면 불필요한 클라이언트 JavaScript가 늘어난다.
무거운 패키지 lazy loading: next/dynamic으로 렌더될 때만 로드해 초기 번들 크기를 줄인다.
이미지 최적화(next/image): WebP, AVIF 자동 변환, srcset 반응형 서빙, 기본 lazy loading을 제공한다.
폰트 최적화: transfonter로 필요한 문자 서브셋만 포함한 폰트 파일을 생성해 파일 크기를 50% 이상 줄인다. Jennifer Fisher 사례는 PageSpeed 99~100 달성.
비디오 최적화: Mux 컴포넌트로 비디오 poster를 최적화하고, 뷰포트 진입 시에만 비디오를 로드하는 lazy 컴포넌트를 구현한다.
useOptimistic 훅: 폼 제출 등 서버 인터랙션에서 서버 응답을 기다리지 않고 즉시 UI를 업데이트해 체감 속도를 높이고, 실패 시 자동 롤백된다.

왜 읽나- Next.js App Router 기반 프로젝트의 Core Web Vitals와 성능을 개선하려는 프론트엔드 개발자에게 단계별 최적화 기법과 코드 패턴 레퍼런스로 유용하다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Next.js로 빠른 웹사이트 만들기: 서버 속도 극대화와 클라이언트 부담 최소화

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기