Open hoongding opened 6 months ago
SSR 환경, 서버컴포넌트에서는 스타일링이 어렵다.
경고: 런타임 자바스크립트가 필요한 CSS-in-JS 라이브러리는 현재 Server Components에서 지원되지 않습니다. Server Components 및 Streaming과 같은 최신 React 기능과 함께 CSS-in-JS를 사용하려면 라이브러리 작성자가 동시 렌더링을 포함한 최신 버전의 React를 지원해야 합니다.
React Server Components 및 스트리밍 아키텍처를 지원하는 CSS 및 JavaScript 자산을 처리하기 위해 React 팀과 함께 업스트림 API에 대해 협력하고 있습니다.
- styled-components 동작 특성상, 클라이언트 런타임 때 생성되고 주입된다.
- 서버사이드 렌더링일때, styled-components의 style은 서버가 아닌 클라이언트 런타임때 생성되고 주입되므로, 잠깐 깜빡임이 존재하게 된다.
- 이건 _document.tsx에서 해결 가능하다.
- 서버 쪽에서 CSS-in-JS에 대한 설정을 해서 문제를 해결해도, 완벽하게 해결하지는 못한다.
- 결국 CSS 코드는 클라쪽에서 실행될 JS에도 포함된다.
- 때문에 동일한 스타일에 대한 코드가 [서버쪽] 초기 HTML에서 한번, [클라쪽] JS 번들에서 두번 클라이언트에게 전달된다.
주제
SSR에서의 CSS-in-JS의 단점은?
선정 이유
CSS-in-JS의 동작원리와 그 원리에 따른 SSR에서의 단점을 알아보고 싶다.
책 내용 (p페이지)
324p ~ 329p