엣지 렌더링(Edge Rendering)은 사용자와 가장 가까운 CDN 엣지 노드에서 HTML을 동적으로 생성하는 기법이다. 서버 사이드 렌더링의 장점을 유지하면서 지연시간을 최소화한다.
렌더링 방식 비교
| 방식 | 위치 | 지연시간 | 동적 데이터 | 개인화 |
|---|
| SSG | 빌드 시 | 매우 낮음 | 불가 | 불가 |
| CDN 캐시 | 엣지 | 매우 낮음 | 불가 | 불가 |
| SSR | 원본 서버 | 높음 | 가능 | 가능 |
| Edge SSR | 엣지 노드 | 낮음 | 가능 | 가능 |
| ISR | 엣지+원본 | 낮음 | 제한적 | 불가 |
typescript
// worker.ts (Cloudflare Workers)
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const url = new URL(request.url);
// 엣지에서 A/B 테스트
const variant = Math.random() < 0.5 ? 'A' : 'B';
// 사용자 위치 기반 개인화 (Workers 환경)
const country = request.cf?.country ?? 'US';
const lang = country === 'KR' ? 'ko' : 'en';
// 엣지에서 HTML 생성
const html = await renderPage(url.pathname, { variant, lang });
return new Response(html, {
headers: {
'Content-Type': 'text/html;charset=UTF-8',
'Cache-Control': 'private, no-cache',
'Vary': 'Accept-Language'
}
});
}
};
// Next.js 엣지 런타임
// app/api/personalized/route.ts
export const runtime = 'edge'; // 엣지에서 실행
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const userId = searchParams.get('userId');
// 엣지 KV에서 사용자 설정 조회
const prefs = await env.USER_KV.get(userId);
return Response.json({ prefs: JSON.parse(prefs ?? '{}') });
}
엣지 렌더링 제약사항
엣지 런타임 제약:
- Node.js API 미지원 (fs, path 등)
- 실행 시간 제한 (수 ms ~ 수십 ms)
- 메모리 제한 (수 MB)
- 패키지 크기 제한
지원:
- Web API (fetch, URL, crypto, etc.)
- 경량 라이브러리
- KV 스토어, D1(SQLite), R2(S3)
적합한 사용 사례:
- A/B 테스트
- 지역화/언어 처리
- 인증 미들웨어
- 헤더/리다이렉트 처리
- 경량 API 응답
관련 문서
