Dewdew logo-mobile
Uses
Tech
방명록
포트폴리오

심층탐구! 본격 Nuxt4 vs Next16 성능비교!

동일한 조건에서 구현한 컴포넌트와 페이지를 통해 서버·클라이언트 측 성능을 비교합니다!

nuxt4 nuxt vue3 typescript frontend framework meta framework nuxt4 blog next16 next16 blog next16 feature
dewdew

Dewdew

Nov 8, 2025

30 min read

cover

엄격하게 통제된 상태로 동일한 규격의 컴포넌트, 페이지, 서버를 구현하고, 서버측과 클라이언트측 구동성능에 대한 비교를 해보도록 하겠습니다!
실제 코드베이스와 배포환경(Nuxt4, Next16) 또한 확인해주세요!🤨

들어가기 앞서,

현대적인 웹 프레임워크(메타 프레임워크) 중에서도 세계적으로 사랑받고 있는 두 개의 프레임워크가 있죠!
그것은 바로 Nuxt4와 Next16일 것입니다!

지난 글에서도 언급드렸듯이, 이 두 개의 프레임워크가 성능적으로 얼마나 우위를 가지고 있을지에 대해서 심층적으로 살펴보도록 하려고 합니다!

이쯤에서 Nuxter로서, 개인적인 바람으로 Nuxt4가 성능적으로 우위를 가지길 간절히 바라봅니다..ㅋㅋㅋ
그러면 본격적으로 글을 시작해볼까요?

Nuxt4와 Next16의 프로젝트 설정과정

각각의 프레임워크는 하나의 repository에 개별 폴더로서 구현을 진행합니다!
최대한 동일한 규격의 화면과 서버, 모듈을 사용하기 위해 다음과 같이 설치하고 페이지를 구성했어요!

프레임워크 기본설정

Nuxt4

  • Hybrid Rendering (SSR + CSR) : 기본적으로 SSR 이후 Hydration과정 거침
  • UI Framework : Nuxt UI

Next16

  • SSR
  • UI Framework : Shadcn UI

화면, 컴포넌트, 서버 구성

  • 페이지 : 홈 / 카운터 페이지 / 서버 측 데이터 조회 페이지
  • 컴포넌트 : 모달 컴포넌트
  • 서버 : 간단한 mock데이터를 조회할 수 있는 서버

공통적으로 설치한 모듈

  • typescript
  • prettier
  • eslint
  • @lhci/cli: Lighthouse CI
  • autocannon: 서버 벤치마크 도구

UI 프레임워크

Nuxt4

  • @nuxt/ui (tailwindcss 및 icon 라이브러리가 기본내장)

Next16

  • @tailwindcss, lucide-react
  • @radix-ui/react-dialog (shadcn/ui 사용)

자세한 폴더 구조는 아래와 같아요! (핵심적인 것들만 표시했어요!)
음… 이렇게 보니까 Nuxt4가 조금 더 폴더 구조가 간단하죠?ㅋㅋ (1승?)

// nuxt4

/nuxt4/
├── app/
│   ├── app.vue
│   ├── assets/
│   ├── components/
│   │   └── AModal.vue         # 모달 컴포넌트
│   ├── layouts/
│   │   └── default.vue        # 기본 레이아웃
│   └── pages/
│       ├── index.vue          # 홈 페이지
│       ├── counter.vue        # 카운터 페이지
│       └── data.vue          # 데이터 페이지
├── server/
│   └── api/
│       └── data.get.ts       # API 라우트 (GET)
├── nuxt.config.ts            # Nuxt 설정
└── package.json
// next16

next16/
├── app/
│   ├── api/
│   │   └── data/
│   │       └── route.ts      # API 라우트
│   ├── counter/
│   │   └── page.tsx          # 카운터 페이지
│   ├── data/
│   │   └── page.tsx          # 데이터 페이지
│   ├── layout.tsx            # 루트 레이아웃
│   └── page.tsx              # 홈 페이지
├── components/
│   ├── Modal.tsx             # 모달 컴포넌트
│   ├── Navigation.tsx        # 네비게이션 컴포넌트
│   └── ui/
│       ├── button.tsx        # 버튼 UI 컴포넌트
│       ├── card.tsx          # 카드 UI 컴포넌트
│       └── dialog.tsx        # 다이얼로그 UI 컴포넌트
├── lib/
│   ├── counter-store.ts      # 카운터 상태 관리
│   └── utils.ts              # 유틸리티 함수
├── next.config.ts            # Next.js 설정
├── components.json           # shadcn/ui 설정
└── package.json

어떤 도구로 테스트해야 될까??

이 부분도 정말 많이 고민했던 부분인데요…
사실 두 프레임워크가 서버 측, 클라이언트 측 기능을 모두 구현할 수 있기 때문에, lighthouse로 성능 측정하는 것뿐만 아니라 서버 측 성능도 체크해야 한다고 생각했어요!

그래서 다음과 같은 도구를 사용하기로 결정했어요!

  1. lighthouse cli: 로컬 환경 및 빌드 환경에서 각 페이지에 대한 벤치마크 측정
  2. autocannon: 로컬 및 빌드 환경에서 서버 측 벤치마크 측정

어떤 환경에서 측정을 해야 할까?

다음으로 고민이 되었던 부분이에요!
그래서 다음과 같은 환경에서 측정을 하려고 준비하였습니다!

  1. 로컬 개발 환경에서의 측정 (FE: lighthouse cli / BE: autocannon)
  2. Github Action을 통해 배포 후 측정 (FE: lighthouse cli / BE: autocannon)
  3. Vercel에 배포된 번들 사이즈 비교
  4. 배포 환경에서 클라이언트 환경에서의 lighthouse 측정

이 정도면 비교가 되지 않을까 싶어요!ㅋㅋㅋ

본격 성능 비교

프로젝트의 기본 구성과 측정 방법을 설정하였으니,
이제부터 위에 말씀드린 바와 같이 순차적으로 성능 비교를 해보도록 하겠습니다!

1. 로컬 개발환경 서버 성능 측정

주요 성능 지표

지표Nuxt 4Next.js 16성능 차이
평균 지연시간13.11ms157.49msNuxt 4가 12배 빠름
초당 요청 처리량734 req/s63.1 req/sNuxt 4가 11.6배 많음
초당 데이터 전송량97.82 MB/s21.17 MB/sNuxt 4가 4.6배 높음
표준 편차6.01ms68.68msNuxt 4가 11.4배 일관적

지연시간 분포

백분위수Nuxt 4Next.js 16차이
0.001% (최소)4ms58ms14.5배
2.5%6ms96ms16배
50% (중간값)13ms127ms9.8배
97.5%25ms316ms12.6배
99%41ms549ms13.4배
99.9%58ms563ms9.7배
99.99% (최대)65ms563ms8.7배

요청/데이터 처리 통계

항목Nuxt 4Next.js 16차이
Req/Sec (1%)6293021배
Req/Sec (2.5%)6293021배
Req/Sec (50%)7406810.9배
Req/Sec (97.5%)7847710.2배
Bytes/Sec (평균)10.3 MB2.22 MB4.6배

총 처리량 (10초간)

항목Nuxt 4Next.js 16차이
총 요청 수7,360 requests641 requests11.5배
총 데이터 전송량103 MB23.2 MB4.4배
에러00동일
타임아웃00동일

로컬 환경 테스트에서는 Nuxt 4가 Next.js 16을 압도적으로 우위에 있네요!

  1. 응답 속도: 12배 빠름
  2. 처리량: 11.6배 많음
  3. 안정성: 표준편차가 훨씬 낮아 더 일관적
  4. 확장성: 동일한 시간에 11.5배 더 많은 요청 처리

로컬 개발환경 서버 성능 측정 결과

2. 로컬 개발환경 FE 성능 측정

Nuxt 4 - Lighthouse 성능 측정 결과 (총 3회 측정입니다!)

측정 회차PerformanceAccessibilityBest PracticesSEO
1차 측정99 🟢100 🟢100 🟢100 🟢
2차 측정99 🟢100 🟢100 🟢100 🟢
3차 측정99 🟢100 🟢100 🟢100 🟢
평균99100100100

Nuxt 4 - 상세 메트릭 (평균)

메트릭1차2차3차평균
First Contentful Paint1.7s1.7s1.7s1.7s 🟢
Largest Contentful Paint1.8s1.8s1.8s1.8s 🟢
Total Blocking Time0ms10ms10ms6.7ms 🟢
Speed Index1.7s1.7s1.7s1.7s 🟢
Cumulative Layout Shift0000 🟢

로컬 개발환경 FE 성능 측정 결과 Nuxt4(1) 로컬 개발환경 FE 성능 측정 결과 Nuxt4(2) 로컬 개발환경 FE 성능 측정 결과 Nuxt4(3)

Next.js 16 - Lighthouse 성능 측정 결과 (3회)

측정 회차PerformanceAccessibilityBest PracticesSEO
1차 측정81 🟠100 🟢100 🟢100 🟢
2차 측정82 🟠100 🟢100 🟢100 🟢
3차 측정83 🟠100 🟢100 🟢100 🟢
평균82100100100

Next.js 16 - 상세 메트릭

메트릭1차2차3차평균
First Contentful Paint0.8s0.8s0.8s0.8s 🟢
Largest Contentful Paint4.8s4.8s4.7s4.77s 🔴
Total Blocking Time150ms80ms80ms103.3ms 🟠
Speed Index0.8s0.8s0.8s0.8s 🟢
Cumulative Layout Shift0000 🟢

로컬 개발환경 FE 성능 측정 결과 Next.js 16(1) 로컬 개발환경 FE 성능 측정 결과 Next.js 16(2) 로컬 개발환경 FE 성능 측정 결과 Next.js 16(3)

Performance 점수 비교

프레임워크평균 점수편차안정성등급
Nuxt 499 🟢±0완벽A+
Next.js 1682 🟠±1양호B
차이+17점---

핵심 성능 메트릭 비교

메트릭Nuxt 4Next.js 16Winner차이
First Contentful Paint (FCP)1.7s0.8sNext.js 162.1배 빠름
Largest Contentful Paint (LCP)1.8s4.77sNuxt 42.65배 빠름
Total Blocking Time (TBT)6.7ms103.3msNuxt 415.4배 적음
Speed Index1.7s0.8sNext.js 162.1배 빠름
Cumulative Layout Shift (CLS)00동점동일

측정 안정성

프레임워크Performance 변동메트릭 일관성평가
Nuxt 4없음 (99→99→99)매우 높음⭐⭐⭐⭐⭐
Next.js 16약간 (81→82→83)높음⭐⭐⭐⭐

Nuxt 4의 강점

  1. 전체 Performance 점수: 99점으로 거의 완벽
  2. LCP (최대 콘텐츠풀 페인트): 1.8초로 우수 (2.5초 이하 권장)
  3. TBT (총 차단 시간): 평균 6.7ms로 거의 없음 (200ms 이하 권장)
  4. 일관성: 3번 측정 모두 동일한 결과로 매우 안정적
  5. 레이아웃 안정성: CLS 0으로 완벽

Next.js 16의 특징

  1. FCP (첫 콘텐츠풀 페인트): 0.8초로 매우 빠름
  2. Speed Index: 0.8초로 매우 우수
  3. LCP 문제: 4.77초로 권장 기준(2.5초) 초과 🔴
  4. TBT 문제: 103.3ms로 다소 높음 (권장: 200ms 이하지만 이상적으로는 더 낮아야 함)
  5. 점진적 개선: 81→82→83으로 측정 시마다 약간씩 상승

Nuxt 4의 우위

  • LCP가 2.65배 빠름 (사용자가 실제로 콘텐츠를 보는 시간)
  • TBT가 15배 이상 적음 (JavaScript 블로킹 최소화)
  • 전체적으로 17점 높은 Performance 점수

Next.js 16의 우위

  • FCP와 Speed Index에서 2배 빠름 (첫 화면 표시 속도)
  • 초기 렌더링이 더 빠르지만, 전체 콘텐츠 로딩이 느림

종합 평가

평가 항목Nuxt 4Next.js 16Winner
전체 Performance9982Nuxt 4
초기 렌더링 속도양호우수Next.js 16
주요 콘텐츠 로딩우수부족Nuxt 4
JavaScript 실행우수보통Nuxt 4
안정성/일관성완벽양호Nuxt 4
SEO/접근성100100동점

3. 배포환경 서버 성능 측정 (Github Actions)

주요 성능 지표

지표Nuxt 4Next.js 16성능 차이
평균 지연시간69.62ms24.20msNext16이 2.88배 빠름
초당 요청 처리량294.4 req/s407.7 req/sNext16이 38.5% 더 많음
초당 데이터 전송량26.48 MB/s76.74 MB/sNext16이 2.90배 높음
표준 편차18.66ms26.45msNuxt4가 더 일관적

지연시간 분포

백분위수Nuxt 4Next.js 16차이
최소 (Min)14ms2ms7배
2.5%26ms4ms6.5배
50% (중간값)68ms8ms8.5배
97.5%107ms87ms1.23배
99%182ms87ms2.09배
최대 (Max)193ms251msNuxt 4 더 낮음

요청 처리 통계

백분위수Nuxt 4Next.js 16차이
1%131 req/s228 req/s1.74배
2.5%131 req/s228 req/s1.74배
50%131 req/s433 req/s3.31배
97.5%228 req/s488 req/s2.14배
평균294.4 req/s407.7 req/s1.38배
최소 (Min)131 req/s228 req/s1.74배

데이터 전송량 통계

백분위수Nuxt 4Next.js 16차이
1%1.83 MB/s2.8 MB/s1.53배
2.5%1.83 MB/s2.8 MB/s1.53배
50%2.95 MB/s5.43 MB/s1.84배
97.5%3.13 MB/s6.13 MB/s1.96배
평균2.81 MB/s5.14 MB/s1.83배

총 처리량 (10초간)

항목Nuxt 4Next.js 16차이
총 요청 수2,944 requests4,822 requests1.64배 (63.8% 더 많음)
총 데이터 전송량28.1 MB31.8 MB1.13배 (13.2% 더 많음)
에러00동일
타임아웃00동일

배포 환경에서는 Next.js 16이 우수했네요?!

  • 평균 응답 속도 2.88배 빠름
  • 요청 처리량 38.5% 높음 (10초간 1,878개 더 많은 요청 처리)
  • 데이터 전송량 2.9배 많음
  • 중간값 지연시간 8.5배 빠름
  • 50% 백분위 요청 처리량 3.31배 높음

단! Nuxt 4가 표준편차가 낮아 더 일관적인 성능을 보입니다.

배포환경 서버 성능 측정 결과

4. 배포환경 FE 성능 측정 (Github Actions)

Nuxt 4 - Lighthouse 성능 측정 결과 (3회)

측정 회차PerformanceAccessibilityBest PracticesSEO
1차 측정99 🟢100 🟢100 🟢100 🟢
2차 측정99 🟢100 🟢100 🟢100 🟢
3차 측정93 🟢100 🟢100 🟢100 🟢
평균97100100100

Nuxt 4 - 상세 메트릭

메트릭1차2차3차평균
First Contentful Paint1.7s1.7s2.0s1.8s 🟢
Largest Contentful Paint1.8s1.8s2.1s1.9s 🟢
Total Blocking Time60ms50ms170ms93.3ms 🟢
Speed Index1.7s1.7s4.0s2.47s 🟠
Cumulative Layout Shift0000 🟢

배포환경 FE 성능 측정 결과 Nuxt4(1) 배포환경 FE 성능 측정 결과 Nuxt4(2) 배포환경 FE 성능 측정 결과 Nuxt4(3)

Next.js 16 - Lighthouse 성능 측정 결과 (3회)

측정 회차PerformanceAccessibilityBest PracticesSEO
1차 측정71 🟠100 🟢100 🟢100 🟢
2차 측정97 🟢100 🟢100 🟢100 🟢
3차 측정97 🟢100 🟢100 🟢100 🟢
평균88.3100100100

Next.js 16 - 상세 메트릭

메트릭1차2차3차평균
First Contentful Paint1.0s0.8s0.8s0.87s 🟢
Largest Contentful Paint2.3s2.5s2.5s2.43s 🟢
Total Blocking Time1,730ms30ms30ms596.7ms 🔴
Speed Index1.6s0.8s0.8s1.07s 🟢
Cumulative Layout Shift0000 🟢

배포환경 FE 성능 측정 결과 Next.js 16(1) 배포환경 FE 성능 측정 결과 Next.js 16(2) 배포환경 FE 성능 측정 결과 Next.js 16(3)

Performance 점수 비교

프레임워크평균 점수최고최저편차안정성
Nuxt 497 🟢9993±3우수
Next.js 1688.3 🟠9771±13변동 큼
차이+8.7점---Nuxt 4 승

핵심 성능 메트릭 비교

메트릭Nuxt 4Next.js 16Winner차이
First Contentful Paint (FCP)1.8s0.87sNext.js 162.07배 빠름
Largest Contentful Paint (LCP)1.9s2.43sNuxt 41.28배 빠름
Total Blocking Time (TBT)93.3ms596.7msNuxt 46.39배 적음
Speed Index2.47s1.07sNext.js 162.31배 빠름
Cumulative Layout Shift (CLS)00동점동일

측정 안정성 비교

프레임워크Performance 변동TBT 변동FCP 변동평가
Nuxt 499→99→93 (±3)60→50→170ms1.7→1.7→2.0s⭐⭐⭐⭐
Next.js 1671→97→97 (±13)1730→30→30ms1.0→0.8→0.8s⭐⭐⭐

Nuxt 4의 강점

  1. 전체 Performance 점수: 평균 97점으로 우수
  2. LCP (최대 콘텐츠풀 페인트): 1.9초로 우수 (2.5초 이하 권장)
  3. TBT (총 차단 시간): 평균 93.3ms로 매우 낮음
  4. 일관성: 3번 중 2번 99점으로 매우 안정적
  5. 레이아웃 안정성: CLS 0으로 완벽

Next.js 16의 특징

  1. FCP (첫 콘텐츠풀 페인트): 0.87초로 매우 빠름
  2. Speed Index: 1.07초로 우수
  3. 1차 측정 문제: TBT 1,730ms로 매우 높았으나, 2-3차는 30ms로 개선
  4. 성능 변동성: 71→97점으로 큰 변동
  5. 평균 TBT 문제: 596.7ms로 높음 (1차 측정 영향) 🔴

Next.js 16 1차 측정 이상 현상

  • 1차: TBT 1,730ms (Performance 71점)
  • 2-3차: TBT 30ms (Performance 97점)
  • 분석: 초기 빌드/캐시 워밍업 이슈로 추정

5. Vercel 배포 빌드 분석

Vercel 빌드 분석 Vercel 빌드 분석 CSV

정적 자산 (Static Assets) 비교

JavaScript 번들 크기

프레임워크총 JS 크기 (압축 전)주요 번들번들 수
Nuxt 4~384 KB최대: 341.3 KB (C21lwjTR.js)8개
Next.js 16~664 KB최대: 221.8 KB (75ddb4dba29fe2f2.js)15개

Nuxt 4 - 주요 JavaScript 파일

파일크기 (원본)크기 (Brotli)압축률
C21lwjTR.js341,318 bytes (333 KB)102,140 bytes (100 KB)70.1% 감소
BBteqT8O.js20,228 bytes (20 KB)5,806 bytes (5.7 KB)71.3% 감소
DKEjFwUr.js12,949 bytes (12.6 KB)5,078 bytes (5 KB)60.8% 감소

Next.js 16 - 주요 JavaScript 파일

파일크기용도 추정
75ddb4dba29fe2f2.js221,840 bytes (217 KB)메인 번들
a6dad97d9634a72d.js112,594 bytes (110 KB)추가 번들
4ef98c6465f5f649.js83,868 bytes (82 KB)추가 번들
b1f432c642155d01.js47,002 bytes (46 KB)추가 번들
1f6ea75f1c7d7706.js39,970 bytes (39 KB)추가 번들
4e4d03e4b7408354.js35,669 bytes (35 KB)추가 번들

CSS 번들 크기

프레임워크총 CSS 크기 (압축 전)Brotli 압축 후
Nuxt 4159,765 bytes (156 KB)17,832 bytes (17.4 KB)
Next.js 1626,112 bytes (25.5 KB)N/A

서버 함수 (Serverless Functions) 크기

Nuxt 4 - 주요 페이지/API

경로크기
/ (홈)1,386,070 bytes (1.32 MB) 🔴🔴
/api/data1,386,070 bytes (1.32 MB) 🔴🔴
/counter1,386,070 bytes (1.32 MB) 🔴🔴
/data1,386,070 bytes (1.32 MB) 🔴🔴

Next.js 16 - 주요 페이지/API

경로크기
/api/data734,405 bytes (717 KB) 🔴
/ (홈)673,106 bytes (657 KB) 🔴
/data649,842 bytes (635 KB) 🔴
/counter673,106 bytes (657 KB) 🔴
/40413,114 bytes (12.8 KB)
/5006,833 bytes (6.7 KB)

압축 전략 비교

프레임워크압축 방식적용 범위
Next.js 16없음Static assets만
Nuxt 4Brotli + Gzip모든 JS/CSS 파일

종합 비교표

항목Next.js 16Nuxt 4우위
클라이언트 JS 크기~664 KB~384 KB (원본) / ~100 KB (Brotli)Nuxt 4
CSS 크기~26 KB~156 KB (원본) / ~17 KB (Brotli)Next.js 16
서버 함수 크기650-735 KB1.32 MBNext.js 16
압축 지원❌✅ (Brotli + Gzip)Nuxt 4
번들 최적화코드 스플리팅 우수큰 단일 번들Next.js 16

Next.js 16의 강점

  1. 작은 서버 함수: 650-735 KB로 Nuxt 4의 절반 수준
  2. 효율적인 코드 스플리팅: 15개의 작은 청크로 분할
  3. 작은 CSS 번들: 26 KB로 매우 가벼움

Nuxt 4의 강점

  1. 압축 최적화: Gzip 압축으로 실제 전송 크기 대폭 감소
    • 메인 JS: 333 KB → 100 KB (70% 감소)
    • 메인 CSS: 152 KB → 16 KB (89% 감소)
  2. 압축 후 실제 크기가 더 작음: 총 ~117 KB vs Next.js ~664 KB

Nuxt 4의 약점

  1. 서버 함수 크기: 1.32 MB로 매우 큼 (Next.js의 2배)
  2. 큰 단일 번들: 333 KB 메인 번들 (압축 전)
  3. CSS 크기: 152 KB로 큼 (압축 전)

클라이언트 성능

  • Nuxt 4 우위: 압축 적용 시 실제 전송 크기가 훨씬 작음 (~117 KB vs ~664 KB)
  • Next.js는 압축이 없어 더 많은 데이터 전송 필요

서버리스 함수 효율성

  • Next.js 16 우위: 서버 함수가 절반 크기로 Cold Start 시간 단축 가능

실제 사용자 경험

측면Winner이유
초기 로딩Nuxt 4압축된 JS/CSS 전송 크기가 훨씬 작음
서버 응답Next.js 16서버 함수 크기가 작아 빠른 실행
캐싱 효율Next.js 16작은 청크로 부분 캐싱 유리
대역폭 사용Nuxt 4압축으로 데이터 전송량 70-89% 감소

7. 클라이언트 환경 분석

Nuxt 4 - 데스크톱 환경

Nuxt 4 - 데스크톱 환경

페이지Performance접근성권장사항SEOFCPLCPTBTSpeed IndexCLS
/100 🟢100 🟢100 🟢100 🟢0.4초0.4초0ms0.9초0
/counter100 🟢96 🟠100 🟢100 🟢0.4초0.4초10ms0.4초0
/data100 🟢100 🟢100 🟢100 🟢0.4초0.4초0ms0.5초0

Nuxt 4 - 모바일 환경

Nuxt 4 - 모바일 환경

페이지Performance접근성권장사항SEOFCPLCPTBTSpeed IndexCLS
/99 🟢100 🟢100 🟢100 🟢1.1초1.7초20ms2.7초0
/counter100 🟢96 🟠100 🟢100 🟢1.7초1.1초0ms1.1초0
/data99 🟢100 🟢100 🟢100 🟢1.7초1.7초10ms2.7초0

Next.js 16 - 데스크톱 환경

Next.js 16 - 데스크톱 환경

페이지Performance접근성권장사항SEOFCPLCPTBTSpeed IndexCLS
/100 🟢100 🟢100 🟢100 🟢0.2초0.4초10ms0.5초0
/counter100 🟢95 🟠100 🟢100 🟢0.2초0.4초0ms0.2초0
/data100 🟢100 🟢100 🟢100 🟢0.2초0.4초0ms0.4초0

Next.js 16 - 모바일 환경

Next.js 16 - 모바일 환경

페이지Performance접근성권장사항SEOFCPLCPTBTSpeed IndexCLS
/99 🟢100 🟢100 🟢100 🟢1.2초1.3초10ms2.8초0
/counter99 🟢95 🟠100 🟢100 🟢1.2초1.3초0ms1.2초0
/data100 🟢100 🟢100 🟢100 🟢0.8초1.3초50ms0.9초0

데스크톱 환경 비교

메트릭Next.js 16 평균Nuxt 4 평균차이
Performance100100-
FCP0.2초0.4초Next.js 16이 2배 빠름
LCP0.4초0.4초-
TBT3.3ms3.3ms-
Speed Index0.37초0.6초Next.js 16이 1.6배 빠름
CLS00-

모바일 환경 비교

메트릭Next.js 16 평균Nuxt 4 평균차이
Performance99.399.3-
FCP1.07초1.5초Next.js 16이 1.4배 빠름
LCP1.3초1.5초Next.js 16이 1.15배 빠름
TBT20ms10msNuxt가 2배 적음
Speed Index1.63초2.17초Next.js 16이 1.33배 빠름
CLS00-

페이지별 성능 비교

Root (/)

환경메트릭Nuxt 4Next.js 16
데스크톱Performance100100
FCP0.4초0.2초
모바일Performance9999
FCP1.1초1.2초

Counter (/counter)

환경메트릭Nuxt 4Next.js 16
데스크톱Performance100100
Speed Index0.4초0.2초
모바일Performance10099
Speed Index1.1초1.2초

Data (/data)

환경메트릭Nuxt 4Next.js 16
데스크톱Performance100100
FCP0.4초0.2초
모바일Performance99100
TBT10ms50ms

데스크톱 환경

  • 둘 다 완벽한 성능: Performance 100점으로 동일
  • Next.js 16 약간 우세: FCP와 Speed Index에서 미세하게 빠름
  • 실질적 차이: 매우 미미함 (0.2초 vs 0.4초)

모바일 환경

  • Performance 점수: 동일 (99.3점)
  • Next.js 16 우세: FCP, LCP, Speed Index에서 일관되게 빠름
  • Nuxt 4 우세: TBT(JavaScript 블로킹)에서 2배 적음

접근성 점수

  • Counter 페이지: 둘 다 95-96점으로 약간 낮음
  • 나머지 페이지: 모두 100점으로 완벽

두 프레임워크 모두 클라이언트 환경에서 탁월한 성능을 보이며, 실사용에서 체감 차이는 거의 없습니다!

Nuxt 4 vs Next.js 16 최종 종합 성능 비교

1. 로컬 환경 - 서버 성능 측정

결론: Nuxt 4 압도적 승리 ⭐⭐⭐⭐⭐

지표Nuxt 4Next.js 16Winner성능 차이
평균 지연시간13.11ms157.49msNuxt 412배 빠름
초당 요청 처리734 req/s63.1 req/sNuxt 411.6배 많음
초당 데이터 전송97.82 MB/s21.17 MB/sNuxt 44.6배 높음
표준 편차6.01ms68.68msNuxt 411.4배 일관적
에러율00동점-

2. 로컬 환경 - Lighthouse 측정

결론: Nuxt 4 승리 (LCP & TBT 압도적) ⭐⭐⭐⭐⭐

지표Nuxt 4Next.js 16Winner차이
Performance 점수99 (±0)82 (±1)Nuxt 4+17점
FCP1.7초0.8초Next.js 162.1배 빠름
LCP1.8초4.77초Nuxt 42.65배 빠름
TBT6.7ms103.3msNuxt 415.4배 적음
Speed Index1.7초0.8초Next.js 162.1배 빠름
CLS00동점-

3. 배포 환경 - 서버 성능 측정

결론: Next.js 16 압도적 승리 ⭐⭐⭐⭐⭐

지표Nuxt 4Next.js 16Winner성능 차이
평균 지연시간69.62ms24.20msNext.js 162.88배 빠름
초당 요청 처리294.4 req/s407.7 req/sNext.js 1638.5% 많음
초당 데이터 전송26.48 MB/s76.74 MB/sNext.js 162.90배 높음
표준 편차18.66ms26.45msNuxt 4더 일관적
총 요청 (10초)2,9444,822Next.js 1663.8% 많음

4. 배포 환경 - Lighthouse 측정

주목할 점:

  • Next.js 16의 1차 측정에서 TBT 1,730ms (매우 높음)
  • 2-3차 측정에서 급격히 개선 (20-30ms)
  • Nuxt 4는 일관되게 우수한 성능 유지

결론: Nuxt 4 승리 (더 일관적이고 안정적) ⭐⭐⭐⭐⭐

지표Nuxt 4Next.js 16Winner차이
Performance 점수97.791.8Nuxt 4+5.9점
FCP1.76초0.84초Next.js 162.1배 빠름
LCP1.86초2.54초Nuxt 41.37배 빠름
TBT73.3ms368msNuxt 45배 적음
Speed Index2.13초1.0초Next.js 162.1배 빠름
CLS00동점-
일관성양호 (93→99→99)변동 큼 (71→97→97)Nuxt 4더 안정적

5. Vercel 빌드 분석

결론:

  • 클라이언트: Nuxt 4 승리 (5.9배 작음)
  • 서버: Next.js 16 승리 (절반 크기)
항목Nuxt 4Next.js 16Winner
클라이언트 JS (원본)384 KB664 KBNuxt 4
클라이언트 JS (압축)100 KB (Brotli)664 KBNuxt 4
CSS (원본)156 KB26 KBNext.js 16
CSS (압축)17 KB (Brotli)26 KBNuxt 4
총 클라이언트 전송~117 KB~690 KBNuxt 4
압축률70-89% 감소없음Nuxt 4
서버 함수 크기1.32 MB650-735 KBNext.js 16
코드 스플리팅8개 청크15개 청크Next.js 16

6. 클라이언트 환경 - 실제 사용자 측정

결론:

  • 데스크톱: 거의 동점
  • 모바일: Next.js 16 약간 우세

데스크톱 환경

메트릭Nuxt 4Next.js 16Winner차이
Performance100100동점-
FCP0.4초0.2초Next.js 162배
LCP0.4초0.4초동점-
TBT3.3ms3.3ms동점-
Speed Index0.6초0.37초Next.js 161.6배

모바일 환경

메트릭Nuxt 4Next.js 16Winner차이
Performance99.399.3동점-
FCP1.5초1.07초Next.js 161.4배
LCP1.5초1.3초Next.js 161.15배
TBT10ms20msNuxt 42배 적음
Speed Index2.17초1.63초Next.js 161.33배

최종 성능 비교 요약

어떻게 보셨나요?
비교를 이렇게 열심히 한 적이 언제였을지도 잊어버렸는데요…ㅋㅋㅋ
이제 마무리로 최종적인 성능 비교를 해보려고 합니다!

1. 📈 최종 성적표

카테고리Nuxt4 점수Nuxt4 평가Next16 점수Next16 평가
🚀 개발 속도100/100S급60/100C급
📦 번들 크기95/100A급65/100C급
⚡ 서버 성능75/100B급100/100S급
🎨 사용자 경험99/100S급99/100S급
🔧 일관성100/100S급75/100B급
종합 평균93.8/100A+급79.8/100B+급

2. 환경별 성능 종합 점수

테스트 환경Nuxt 4Next.js 16Winner
1. 로컬 서버⭐⭐⭐⭐⭐⭐⭐Nuxt 4
2. 로컬 Lighthouse⭐⭐⭐⭐⭐⭐⭐⭐⭐Nuxt 4
3. 배포 서버⭐⭐⭐⭐⭐⭐⭐⭐Next.js 16
4. 배포 Lighthouse⭐⭐⭐⭐⭐⭐⭐⭐⭐Nuxt 4
5. 빌드 (클라이언트)⭐⭐⭐⭐⭐⭐⭐⭐Nuxt 4
6. 빌드 (서버)⭐⭐⭐⭐⭐⭐⭐⭐Next.js 16
7. 클라이언트 (데스크톱)⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐동점
8. 클라이언트 (모바일)⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐거의 동점

3. 개발 환경 (Development)

영역Nuxt 4Next.js 16Winner차이
로컬 서버 속도13ms157msNuxt 412배
개발 경험매우 빠름느림Nuxt 4-
Lighthouse 점수9982Nuxt 4+17점

4. 프로덕션 환경 (Production)

영역Nuxt 4Next.js 16Winner차이
서버 응답 속도70ms24msNext.js 162.9배
처리량294 req/s408 req/sNext.js 1638%
Lighthouse 점수97.791.8Nuxt 4+5.9점
클라이언트 번들117 KB690 KBNuxt 45.9배
서버 함수1.32 MB650 KBNext.js 162배

5. 사용자 경험 (User Experience)

영역Nuxt 4Next.js 16Winner
데스크톱 성능100100-
모바일 성능99.399.3-
대역폭 사용매우 적음보통Nuxt 4

마무리

두 프레임워크는 상황별로 각자의 강점이 명확하다고 판단됩니다!

개발 단계에서는 Nuxt4가 12배 빠른 서버와 뛰어난 개발 경험으로 압도적인 우위를 보였으며,
프로덕션 서버 환경에서는 Next16이 Vercel과의 동기화가 높은 것으로 판단됩니다!
(AWS에서는 어떻게 될지 궁금하네요!)

그리고 Lighthouse 점수와 번들 크기, 측정 안정성에서 각각 Nuxt4가 우위에 있다는 것이 매우 인상적이었습니다!

물론 사용자 경험은 거의 동등하기 때문에 이 점은 비교할 것이 없을 것 같네요!

두 프레임워크 모두 25년 연말을 향해 달리고 있는 이 시점에, 최고 수준의 프레임워크라고 생각되며,
아래와 같이 추천하고 싶어요!

우선순위추천 프레임워크이유
빠른 개발Nuxt 4 🟢12배 빠른 로컬 서버
최고 서버 성능Next.js 16 🔵2.9배 빠른 응답
비용 효율Nuxt 4 🟢5.9배 작은 번들
대규모 트래픽Next.js 16 🔵38% 높은 처리량
일관된 성능Nuxt 4 🟢안정적 측정값

위에서 테스트했던 두 개의 프레임워크 소스 코드 및 배포 환경은 아래에서 확인이 가능해요!
Github - Meta Framework Compare
Nuxt4
Next16

그러면 다음에도 좋은 글로 찾아뵐 수 있도록 할게요!

다음 글에서 봬요!

참고 문서

cover

이전 게시글 →

Nuxt4의 단짝친구 Nuxt UI v4 를 소개합니다!

Dewdew of the Internet © 2024