styled-components는 SWC 변환과 Registry를 함께 설정한다

compiler.styledComponents로 SSR class 변환을 켠 뒤 요청별 규칙을 수집해 콘텐츠보다 먼저 보낸다.

1

SWC transform

compiler.styledComponents: true로 SSR 변환 활성화

2

Render & collect

ServerStyleSheet가 요청별 style rule 수집

3

Insert & clear

useServerInsertedHTML로 주입한 뒤 tag 비우기

4

Hydrate

client가 같은 class와 순서를 재사용

핵심Next.js 기본 컴파일러가 SWC이므로 styled-components용 Babel 플러그인을 별도로 설치하지 않는다.