왜 emotion같은 css-in-js 프레임워크들은 ssr이 힘든걸까?

🙄Emotion이 'use client'를 사용하라고 불평했다.

emotion을 학습해보던 중 next.js 환경에서 사용해보려고 하니 위와 같은 에러를 반환했습니다.

우선 emotion docs에 ssr에 관한 항목이 있어 이를 참고해보았습니다.

https://emotion.sh/docs/ssr

Emotion – Server Side Rendering

요지는 다음과 같습니다.

Emotion 10(현재 latest버전은 11입니다.)의 서버사이드렌더링 방식에는 trade off가 있는 두가지 방법이 있습니다.

1. 기본적인 접근 방식(특정한 css 셀렉터가 동작하지 않는 문제가 있습니다.)

const MyDiv = styled('div')({ fontSize: 12 })
<MyDiv>Text</MyDiv>
// Will render as
<style data-emotion-css="21cs4">.css-21cs4 { font-size: 12 }</style>
<div class="css-21cs4">Text</div>

기본적인 접근 방식의 경우 위와 같은 예시 코드를 제공해주는데

스타일 태그를 html 마크업에 직접 삽입하는 방식으로 동작하기 때문에

nth-child와 같은 셀렉터를 사용하면 문제가 생길 수 있는 구조인 듯합니다.

 

2. 고급 접근 방식 (기본 방식의 한계를 극복한 방법입니다. css 셀렉터에 제한이 없습니다.)

이 접근 방식은 streaming APIs.에서는 동작하지 않는다고 합니다.

조금 코드가 길어서 해당 링크에 방문하여 보시는 것을 추천드립니다.

상당히 복잡하네요

 

하여튼 이렇게 존재한다고 하고 Next.js 측에서 제공해주는 예제도 존재하니 가져와봤습니다.

https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion?file=shared%2Fstyles.js 

Next.js With Emotion Example - StackBlitz

 

위 예제를 비슷하게 참고해서 제 프로젝트에 적용해보아도 잘 적용이 되지 않습니다.

왜 그런 것일까요?

좀 더 원인을 찾아보기 위해 구글의 힘을 빌렸습니다.

---

😐next.js 13의 문제도 있다.

https://github.com/emotion-js/emotion/issues/2928

Plans to support Next.js 13 - /app directory · Issue #2928 · emotion-js/emotion

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

Styling: CSS-in-JS | Next.js

 

위 깃허브 이슈와 next.js docs를 참고해보는 것을 통하여 좀 더 정확한 원인을 파악할 수 있었습니다.

제 next.js 프로젝트는 app 디렉토리를 사용하고 있는 중인데

아직 app 디렉토리에 대한 SSR 지원이 미약한 상태이기에

client 컴포넌트로밖에 사용을 못하는 상황이네요

 

제가 겪은 React.createContext 에러와는 살짝 다르지만

같은 함수에서 생긴 문제를 겪은 외국인도 보입니다.

22년 10월 28일에 올라온 댓글이네요

---

🤐다시 본론으로 돌아와

왜 css-in-js 방식의 프레임워크들은 SSR이 힘든 것일까요?

emotion의 docs에서도 확인해볼 수 있었지만 일부분 SSR이 지원되고는 있었습니다.

아예 불가능한 것은 아니지만 어려움이 있어 모든 상황에 적절한 대응을 하지는 못하고 있는 것으로 보입니다.

깃허브 이슈 페이지를 읽어보았을 때

Server Component의 동작 방식과 CSS-in-js의 동작방식이 상충되는 부분이 있기 때문에

완벽하게 지원해주는 것은 힘들 것이라는 뉘앙스의 댓글을 찾아 볼 수 있었습니다.

 

제가 생각하기에 예상되는 문제는 두가지정도가 있을 것 같습니다.

제 추측이니 혹시 사실이 아니라면 댓글로 알려주세용..

 

1. 일반적으로 css-in-js 프레임워크들은 CSS 스타일을 런타임에 동적으로 생성한다.

하지만 SSR을 하는 서버컴포넌트는 HTML 마크업이 적절하게 들어간 HTML파일을 만들어야합니다.

그러려면 서버측에서 CSS-in-JS 코드를 실행시켜서 CSS를 생성해야하는데

이 과정은 복잡할 수 밖에 없다.

 

2. 1을 위해 미리 CSS-in-JS를 서버측에서 실행시키게되면 실행되는 곳이 브라우저가 아니게된다.

따라서 브라우저에서 제공되는 기능에 의존성이 있는 경우에는 문제가 발생할 수 있을 것 같습니다.

 

---

😜결론

왜 next.js는 tailwindcss를 추천하는 것일까?

tailwindcss가 그만큼 대세라는 걸까? 라는 생각이 있었는데

그 이면에는 서버컴포넌트와 CSS-in-JS에 대한 문제가 복잡하게 얽혀있었던 것이 아닐까?

라는 생각으로 바뀌게 된 것 같습니다.