Next.js 15에서 SvelteKit 2 전환을 통한 번들 크기 최적화 및 DX 개선
From Next.js 15 to SvelteKit: Why We Rewrote Rsale.net's Frontend
AI 요약
Context
Next.js 15 기반의 Server/Client Component 이분법 구조로 인한 설계 복잡도 증가 및 런타임 오버헤드 발생. 다국어 처리 및 SSR 캐싱 모델의 불투명함으로 인해 디버깅 비용이 상승한 아키텍처적 한계 직면.
Technical Solution
- Virtual DOM 및 Reconciler를 제거하고 컴파일 단계에서 DOM 직접 조작 코드를 생성하는 Svelte 컴파일러 기반 구조 채택
- $state, $derived 등의 Runes 도입을 통해 Context API나 Provider 없이 전역 상태를 관리하는 명시적 반응성 모델 구축
- hooks.server.ts 내 Cookie 및 Accept-Language 헤더 처리 로직을 통한 다국어 라우팅 단순화로 URL 구조의 동적 세그먼트 제거
- 전용 라이브러리 대신 TypeScript의 keyof 연산자를 활용한 50라인 규모의 경량 i18n 자체 구현으로 의존성 최소화
- REST Contract 기반의 Backend 분리 설계를 유지하여 프런트엔드 프레임워크 교체 시 API 레이어의 변경 없는 무중단 전환 달성
실천 포인트
["Server/Client Component \uad6c\ubd84\uc73c\ub85c \uc778\ud55c \ub798\ud37c \ucef4\ud3ec\ub10c\ud2b8 \ub0a8\ubc1c \uc5ec\ubd80 \ud655\uc778", "i18n \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc624\ubc84\ud5e4\ub4dc\uac00 \uc11c\ube44\uc2a4 \uaddc\ubaa8 \ub300\ube44 \uacfc\ub3c4\ud55c\uc9c0 \uac80\ud1a0", "\ud504\ub7f0\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c \uc804\ud658 \uc2dc Backend\uc640\uc758 REST API \uacc4\uc57d \uc900\uc218 \uc5ec\ubd80 \uc810\uac80", "MVP \ub2e8\uacc4\uc5d0\uc11c \uac1c\ubc1c \uc778\uc6d0 \uaddc\ubaa8\uc5d0 \ub530\ub978 \ud559\uc2b5 \uace1\uc120 \ub300\ube44 \uc0dd\uc0b0\uc131 \uc774\ub4dd \uacc4\uc0b0"]