네트워크 최적화: HTTP/3 + 압축 + prefetch

HTTP/1.1
- 한 연결당 1 요청 (직렬)
- Head-of-Line 블로킹
- 여러 TCP 연결로 우회

HTTP/2
- Multiplexing (한 연결로 동시)
- 서버 푸시
- Header 압축
- 여전히 TCP 기반 → packet loss 시 모두 막힘

HTTP/3 (QUIC)
- UDP 기반
- 0-RTT 핸드셰이크 (재연결)
- packet loss 격리
- 모바일·불안정 네트워크에 강함

Vercel: 자동 (HTTP/3 활성)
Cloudflare: 자동


자체 서버 (nginx):
- nginx 1.25+ 필요

server {
  listen 443 quic reuseport;
  listen 443 ssl http2;

  ssl_protocols TLSv1.3;
  http3 on;
  http3_hq on;
  add_header alt-svc 'h3=":443"; ma=86400';
}

gzip:    표준, 모든 브라우저
brotli:  20% 작음, 95% 브라우저
zstd:    더 빠름·작음, 일부만


→ Cloudflare/Vercel 자동 brotli
→ 자체 서버는 nginx에 추가

# /etc/nginx/nginx.conf
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss image/svg+xml;
gzip_comp_level 6;

# brotli (모듈 설치 필요)
brotli on;
brotli_types text/plain text/css application/json application/javascript;
brotli_comp_level 6;

<!-- Critical resources -->
<link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<link rel="preload" as="script" href="/critical.js">


<!-- Third-party origins -->
<link rel="preconnect" href="https://api.example.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example.com">


<!-- Modulepreload -->
<link rel="modulepreload" href="/_next/static/chunks/main.js">

// Next.js Link — 자동 prefetch
import Link from 'next/link';

<Link href="/products" prefetch>제품</Link>
// → 호버/뷰포트 진입 시 자동 prefetch


// 수동 prefetch (특정 시점)
import { useRouter } from 'next/navigation';

const router = useRouter();
useEffect(() => {
  // 사용자가 가장 자주 가는 곳 prefetch
  router.prefetch('/dashboard');
  router.prefetch('/profile');
}, []);

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/*" } }
  ],
  "prefetch": [
    { "where": { "href_matches": "/api/*" } }
  ]
}
</script>


<!-- → Chrome 121+ 지원 -->
<!-- → 다음 페이지 미리 렌더 → 클릭 즉시 -->

Connection: keep-alive (기본 활성)

Keep-Alive 설정:
- timeout: 60s
- max: 100 requests


Server-side (Node.js):
import { Server } from 'http';
const server = new Server();
server.keepAliveTimeout = 65000;  // ALB 60s보다 약간 길게
server.headersTimeout = 66000;

Cloudflare 무료:
- 글로벌 280+ 데이터센터
- 자동 brotli 압축
- HTTP/3
- Smart Routing
- Argo Smart Routing ($5/mo): 30% 빠름


Vercel Edge:
- 자동 CDN
- Edge Functions
- Image Optimization

// public/sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll([
      '/',
      '/offline',
      '/css/main.css',
      '/js/main.js',
    ]))
  );
});


self.addEventListener('fetch', (event) => {
  // Network first, cache fallback
  event.respondWith(
    fetch(event.request)
      .catch(() => caches.match(event.request) || caches.match('/offline'))
  );
});


// 또는 Workbox (Google 라이브러리)
import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);