Next에서 TailWindCSS 권장하는 이유?

Next.js를 배우면서 Next에서는 TailWindCSS 프레임워크를 사용하도록 권장하는데
(next설치 시에도 tailwindcss를 사용할 거냐고 물어봄)
그 이유에 대해 갑자기 궁금해져서 공부하게 되었다.

 

참고 블로그 : https://velog.io/@shinhw371/CSS-why-Nextjs-recommend-Tailwind

공식 문서: https://nextjs.org/docs/app/building-your-application/styling/css-in-js

 

Next에서의 CSS-in-js 문제?

공식문서에서는 런타임 JavaScript를 필요로 하는 CSS-in-JS 라이브러리가
현재 지원되지 않는다는 내용이 나온다.
Server Components와 Streaming과 같은 최신 기능을 사용할 때
CSS-in-JS를 사용하려면 개발자가 React의 최신 버전을 설치해야 하며
이는 동시 렌더링을 포함한 최신 React 기능을 지원해야 한다고 함

React Server Components 및 스트리밍 아키텍처를 지원하는
API를 개발 중이며, 이러한 환경에서 CSS 및 JavaScript 자산을 처리하기 위한
API를 제공할 예정이라고 나와있다
결론은 대충 CSS-in-js가 Next에서는 문제가 있다는 것 같다?

Server Side Rendering에서의 CSS 문제?

SSR에서 CSS-in-JS 라이브러리를 그대로 사용하면 hydrate 이전 서버에서 받아오는
HTML에 스타일이 전혀 적용되지 않아
잠깐 날 것의 HTML이 나타나는 문제가 있다고 한다.때문에 초기 HTML에 포함되는
요소에 대한 CSS인 Critical CSS를 서버 쪽에서 사용할 수 있도록 하는 처리가 필요한데
보통 SSR 과정에서 정적으로 생성되는 요소의 CSS만 추출해서
HTML에 적용하도록 설정한다. 하지만 문제를 완벽히 해결하지는 못하는데
Critical CSS에 대한 코드가 클라이언트 쪽에서 실행될 JS에도 포함되어야 하며
동일한 스타일에 대한 코드가 초기 HTML에서 한 번,
JS 번들에서 두 번 클라이언트에게 전달된다고 한다.

(SSR에서의 CSS-in-js 불필요한 행동을 추가적으로 하는 것일까?)

SSR 방향성이 페이지에서 컴포넌트로 넘어간 Next.js 13 버전에서는
대부분 사용이 제한적이다.이는 SSR 처리를 한 페이지에 해당되는
HTML를 활용하는 방식으로 구현했기에서버 컴포넌트와 방향이 충돌을 일으키는 것 같다.

그래서 Tailwind CSS  장점은?

• SSR 관점에서 중요한 건 런타임에 스타일시트를 생성하지 않고 빌드 타임에
  스타일시트를 가져오는 방식이라는 점에서 TailWind는 추가적인 설정 없이
  런타임에서 동작
• TailWind는 태그 클래스의 CSS를 적용하는 utility CSS이므로 필요에 따라
  확장성 있게 CSS를 작성할 수 있고,
  빌드 시에 사용하지 않는 클래스는 제거되어 번들 크기도 줄일 수 있음.
• 스타일시트의 크기가 일정해서 파일크기 늘어나지 않는 이점