피드로 돌아가기
Dev.toFrontend
원문 읽기
Client-side JS 697KB 제거를 통한 Server Rendering 회귀와 전력 효율 최적화
Why We Render Everything in the Browser
AI 요약
Context
현대 웹 아키텍처가 AJAX 이후 SPA 중심으로 고착화되며 단순 문서 페이지조차 과도한 JavaScript 번들을 전송하는 구조적 모순 발생. 데이터가 존재하는 Server가 아닌 Client Browser에서 Rendering을 수행함으로써 불필요한 CPU/GPU 자원 낭비와 배터리 소모가 심화된 상황임.
Technical Solution
- Render where the data lives 원칙에 기반한 Server-side Rendering 구조로의 전환
- Client-side State Management 및 View Diffing 의존도를 제거하여 전송 번들 크기 최소화
- Runtime-shipping 방식을 배제하고 Server 내에서 HTML을 직접 생성하여 전송하는 메커니즘 채택
- Rust 등 고성능 언어의 Static Binary와 Native Concurrency를 활용한 Server Rendering 효율 극대화
- Client-side Reactivity를 Server-driven 상태 변경으로 대체하여 Browser의 연산 부하 제거
실천 포인트
- 현재 서비스의 Median Page Weight가 100KB를 초과하는지 확인 - 단순 정보 제공성 페이지에 과도한 Hydration 전략이 적용되었는지 검토 - Client CPU 점유율과 배터리 소모량을 측정하여 Rendering 위치 최적화 여부 판단 - 기술 스택 선정 시 개발자 채용 시장의 트렌드보다 실제 런타임 비용과 사용자 경험(TTV, TTI)을 우선순위에 배치