Next.js 환경에서 CSS in JS Styled-Component의 치명적인 단점

💄 CSS in JS

CSS in JS 는 컴포넌트 스타일링 방식 중 하나 이다. (번외로, CSS in CSS 도 있다.)

쉽게 설명하자면, 자바스크립트 코드에서 CSS 를 작성하는 방식이다.

`.css` 파일을 별도로 생성해 스타일을 주는 방법이 아니라, jsx, tsx 코드 내에서 스타일링이 가능하다.

CSS in JS의 대표적인 라이브러리는 styled-component인데,

css의 기본 작동 방식

 

styled-component

CSS 스타일링을 .css 파일 레벨에서 작성하는 것이 아니라, 컴포넌트 레벨에서 작성이 가능하다 !

---

🤔 그런데 말이죠.

styled-component 는 치명적인 단점이 있다.

바로 SSR,SSG 환경과, 서버컴포넌트에서는 스타일링이 어렵다는 점이다.

SSR을 지원하는 Next.js 의 공식문서에서는 이러한 경고문구가 있다.

왜그럴까??

styled-component가 동작하는 과정을 알면 그 이유를 알 수 있다.

---

⚙️ Styled-component의 동작방식

간단히 설명하자면, `styled-component` 는

클라이언트가 런타임 일 때, 스타일시트를 생성하고 `<style/>` 요소로 DOM 에 주입한다.

즉, 프로젝트가 실행중일때 스타일링이 DOM요소에 주입된다는 것이다.

 

만약, 이 방법이 서버사이드에 동작한다면 어떻게 될까?

서버사이드는 말 그대로 서버에서 HTML이 생성된다.

단, `styled-component` 의 style은 서버가 아닌 클라이언트 런타임때 생성되고 주입되므로,

그 잠깐의 시간동안 깜빡임이 존재하게 된다.

https://shiwoo.dev/posts/next-13-and-css-in-js

---

😅 그래도 쓰고싶어요..

Next.js 11 이하

11버전 이하의 next.js 환경에서 styled-component를 사용하기 위해선 babel 플러그인을 이용했어야만 했다.

// .babelrc

{
	"plugins" ["babel-plugin-styled-componets"] 
}

 

Next.js 12 이상

swc 을 통해 JS파일을 번들하는데, 이경우 별도의 babel 설정이 필요없이 아래처럼 styled-component에 ssr 설정을 주면 된다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

 

자세한 설정은, 본인의 next.js 버전과 맞춰 검색해 설정해주세요 😀

---

React 18v, next.js 13v 에서 중점으로 다루고 있는 기능은 서버컴포넌트이다.

앞으로도 서버컴포넌트에 대한 지원과 업데이트가 이루어질 것 같은데, 서버에서 스타일링이 어려운 CSS in JS방식을 계속 유지해야하나 싶기도 하다.

 

출처

https://www.samsungsds.com/kr/insights/web_component.html

https://shiwoo.dev/posts/next-13-and-css-in-js