Next13 그리고 CSS-in-JS

The following libraries are supported in Client Components in the app directory. If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like PostCSS or Tailwind CSS.
https://nextjs.org/docs/app/building-your-application/styling/css-in-js

• App router를 이용한다면 CSS-in-JS라이브러리를 사용하는 모든 컴포넌트내에 'use client'를 선언해줘야 한다(적어도 아직까지는).

• styled-components를 App router에 최적화시킨 사례가 많이 나오지만 FOUC을 해결하기 위한 방안일뿐, 클라이언트 컴포넌트에만 사용가능한건 동일하다.

• CSS-in-JS뿐만 아니라 리액트 훅을 쓸때에도 use client를 명시해줘야 한다.
  
  
  
  

클라이언트와 서버의 완벽한 분리

서버 컴포넌트를 스타일링하려면 JS라이브러리를 사용하지 않고 CSS모듈 또는 Tailwind를 사용하는것이 답이겠지만, 문제는 리액트 훅도 서버 컴포넌트에서 사용하지 못한다는 것이다.

공식문서는 서버컴포넌트에서 useState와 같은 리액트 훅이 필요하다면 이벤트핸들러를 대신 사용하라고 설명한다.

클라이언트 컴포넌트에서 리액트 훅을 이용해 데이터를 가져올수도 있지만 클라이언트 컴포넌트는 번들사이즈, 초기 렌더링 속도와 직결된다.

그렇다면 App router에서의 서버 컴포넌트는 리액트에서 생각하던 컴포넌트가 아니라 데이터 그 자체로 보는게 편하지 않을까.

굳이 서버 컴포넌트를 어떻게 스타일링해야 할 지 고민하는 것 보다, 클라이언트의 상태변화를 어떻게 받을지, 데이터를 어떻게 클라이언트에 전달할지를 연구해봐야 할 것 같다.

++추가
실제로 서버 컴포넌트를 사용해 보니 스타일링 라이브러리를 사용하지 않아 다행이라고 생각했다. 만약 처음 계획과 같이 styled-components를 사용했다면 클라이언트에는 라이브러리, 서버에는 css모듈 모두 사용하게 되었을 것이다.

참고
[nextjs] 13.4.0부터 안정화된 App Router. Pages Router와 비교
CSS-in-JS libraries Performance Comparison
5 common pitfalls with server components
Why server side components(reddit)