NEXT · CSS-IN-JS
Styled Components SSR 스타일 주입 파이프라인
App Router에서 CSS-in-JS를 쓰려면 서버 렌더링 중 생성된 스타일을 HTML에 먼저 주입하고, 클라이언트가 같은 스타일을 이어 받아야 깜빡임이 줄어듭니다.
SSR 통합 흐름
style
Babel 설정
styled-components 변환 옵션을 맞춥니다.
Registry
렌더링 중 생성된 스타일을 수집합니다.
useServerInsertedHTML
수집된 style 태그를 서버 HTML에 삽입합니다.
HTML 응답
초기 화면부터 CSS가 적용된 상태로 내려갑니다.
hydrate
클라이언트가 동일한 스타일 상태를 이어받습니다.
설정
→
수집
→
삽입
→
응답
→
hydrate
문제 예방
ssr
FOUC 방지
스타일이 늦게 붙어 화면이 번쩍이는 현상을 줄입니다.
순서 유지
서버와 클라이언트의 className 생성 순서를 맞춥니다.
클라이언트 경계
Registry는 보통 Client Component로 둡니다.
라이브러리별 차이
Emotion, Styled Components마다 통합 코드가 다릅니다.