CSS-in-JS cost

CSS-in-JS는 런타임 비용과 SSR 설정을 함께 본다

동적 스타일이 많은 앱은 편의성만큼 런타임 생성, 캐시, SSR 수집 비용도 커진다.

Authoring 컴포넌트 안 스타일 응집도 높음
Runtime props 기반 생성 동적 비용
SSR style collect 초기 화면 안정
Cache class reuse 중복 생성 줄임
선택 기준
장점
주의
디자인 시스템
컴포넌트 응집
런타임 비용
정적 페이지
간단한 CSS/module
과한 도구
동적 테마
props 스타일
SSR 수집 필수
핵심 CSS-in-JS 선택은 취향보다 런타임 비용과 SSR 안정성을 감당할 수 있는지로 판단해야 한다.