[ 5주차 ] SSR에서의 CSS-in-JS 단점은?

[hoongding]

주제

SSR에서의 CSS-in-JS의 단점은?

선정 이유

CSS-in-JS의 동작원리와 그 원리에 따른 SSR에서의 단점을 알아보고 싶다.

책 내용 (p페이지)

324p ~ 329p

[hoongding]

styled-comoponents(CSS-in-JS) 동작방식

• 클라이언트가 런타임일때, 스타일시트를 생성하고, <style/> 요소로 DOM에 주입한다.
• 즉, 프로젝트가 실행중일때 스타일링이 DOM요소에 주입된다.

styled-components(CSS-in-JS) 단점

• 렌더링 속도 저하
  • Tailwind는 빌드타임에 온전한 CSS파일로 변환되기에 추가적 구문 분석이 필요 X
  • 하지만 styled-components는 페이지 로딩시 구문분석 과정이 필요하다.
• JS 번들 크기 증가
  • CSS in JS라는 말처럼 styled components의 스타일은 JS고, 번들에 포함되는게 문제다.
  • styled-components는 사용하지 않는 CSS가 번들에 포함된다.
• 런타임 속도가 느려진다.
  • React는 상태가 변하면 변경된 부분만 직접 변경하는 것이 아닌, 컴포넌트 함수를 다시 실행하고, 가상 DOM을 모두 다시 만든 뒤, 실제 돔과 diff한다.
  • 따라서 매번 styled-components도 다시 실행된다.

Next.js에서의 styled-components의 단점

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 번들에서 두번 클라이언트에게 전달된다.