컴포넌트 단위 스타일
JS 안에서 스타일을 작성하고 props에 따라 스타일을 바꾸기 쉽습니다.
CSS-in-JS
CSS-in-JS SSR 책임
Styled Components, Emotion, registry 설정, Babel 또는 Provider 구성을 서버 렌더링 호환성 기준으로 정리합니다.
유연한 CSS-in-JS
css prop과 styled API를 함께 써 파일 단위 스타일과 컴포넌트 단위 스타일을 섞을 수 있습니다.
서버 스타일 수집
초기 렌더링에서 스타일이 빠지지 않도록 registry나 provider 구성을 확인합니다.
스타일 작성 편의와 SSR 안정성 검토
CSS-in-JS는 동적 스타일에 강하지만 App Router에서 초기 화면 깜박임과 서버 설정을 제대로 처리해야 합니다.
설정 순서
설치선택한 라이브러리와 필요한 컴파일 설정을 추가합니다.
등록App Router에 맞는 style registry 또는 provider를
구성합니다.
SSR 스타일 누락 확인새로고침과 서버 렌더링에서 스타일이 누락되지 않는지
봅니다.