CSS-in-JS는 streaming 전에 스타일을 먼저 흘려보낸다

런타임 스타일이 필요할 때 registry가 서버 render와 client hydration 사이의 규칙 소유권을 잇는다.

1

Registry 생성

한 요청의 style rule을 모을 저장소 준비

2

Server render

컴포넌트가 현재 chunk의 규칙을 수집

3

Insert before content

본문보다 먼저 style tag를 head에 주입

4

Flush

주입한 규칙을 비워 다음 chunk 중복 방지

5

Hydrate

브라우저가 이후 동적 스타일 갱신을 인계

핵심새로고침·streaming에서 FOUC나 class 불일치가 생기면 registry와 주입 순서를 먼저 확인한다.