CSS-in-JS SSR

Styled Components SSR은 스타일 수집 순서가 핵심이다

서버 렌더 중 생성된 스타일을 먼저 모아 HTML과 함께 보내야 초기 화면에서 스타일 깜빡임을 줄일 수 있다.

Render 서버에서 컴포넌트 실행 스타일 생성

Collect StyleSheetRegistry 규칙 수집

Inject head/style HTML과 함께 전달

Hydrate 클라 재사용 순서 불일치 방지

실패

증상

확인

수집 누락

무스타일 깜빡임

registry 설정

순서 불일치

hydration 경고

서버/클라 버전

동적 스타일 과다

CSS 증가

props 제한

핵심 CSS-in-JS SSR의 핵심은 예쁜 문법이 아니라 서버와 클라이언트가 같은 스타일 순서를 공유하는 것이다.