CSS-in-JS SSR

CSS-in-JS 스타일 수집

App Router에서는 컴포넌트 스타일이 서버 HTML과 클라이언트 hydration 사이에서 빠지지 않게 registry 구성을 봐야 합니다.

library

라이브러리

Styled Components, Emotion이 현재 Next.js 버전과 App Router 통합 방식을 지원하는지 확인합니다.

registry

수집 지점

서버 렌더 중 생성된 style 태그가 layout 경계에서 빠지지 않게 감쌉니다.

client

클라이언트 경계

런타임 스타일 생성이 필요한 컴포넌트는 use client 범위를 명확히 둡니다.

cost

비용

동적 스타일이 많을수록 런타임 비용과 캐시 가능성이 달라집니다.

CSS 점검 항목

새로고침 첫 화면에서 스타일 깜박임과 hydration 경고가 없는지 봅니다.

선택

정적 스타일은 CSS Module/Tailwind, 동적 테마는 CSS-in-JS처럼 역할을 나눕니다.

CSS-in-JS 선택의 핵심은 문법 취향보다 서버 렌더와 클라이언트 전환 사이에서 스타일이 안정적으로 이어지는지입니다.