TIL 122. NextJS에서 styled-components 사용하기

그동안 이 게시물에 적을 방법을 통해서 styled-components를 사용해왔지만, 기록을 위해 적어본다.

Next.js와 Styled Components를 함께 사용할 때 발생하는 일반적인 에러 중 하나는 "서버와 클라이언트 간 스타일 불일치" 문제다

이 문제는 서버 사이드 렌더링(SSR) 및 클라이언트 사이드 렌더링(CSR) 간의 스타일 적용 순서 차이로 인해 발생한다.

기본적으로 Next.js는 서버 측에서 페이지를 렌더링한 후 클라이언트에서 페이지를 하이드레이트(Hydration)하여 상호작용성을 제공하는데 이 과정에서 Styled Components를 사용할 때 스타일이 어떤 순서로 적용되는지가 중요하다.

이런 상황에서 발생하는 일반적인 문제들은 다음과 같다.

1. 서버와 클라이언트 간 클래스명 불일치: 서버에서 생성한 스타일 클래스명과 클라이언트에서 생성한 스타일 클래스명이 다르게 생성될 수 있다. 이로 인해 서버에서 생성한 스타일이 클라이언트에서 덮어씌워지지 않아 스타일이 제대로 표시되지 않는 문제가 발생할 수 있다.
2. 깜빡임 (Flash of Unstyled Content): 서버 렌더링된 컨텐츠가 클라이언트 측에서 재렌더링될 때 스타일이 변경되어 화면에 깜빡임이 발생할 수 있다.
3. 캐싱 문제: 서버와 클라이언트에서 동일한 컨텐츠를 다르게 렌더링하거나 캐싱 문제로 인해 스타일이 갱신되지 않는 문제가 발생할 수 있다.

이러한 문제를 해결하기 위한 여러 방법 중, babel-plugin-styled-components를 사용한 해결 방법을 아래에 적어봤다.

루트 폴더에 .babelrc 파일을 만들고 아래 코드를 작성한다.

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "fileName": true,
        "displayName": true,
        "pure": true
      }
    ]
  ]
}

플러그인 옵션에는 아래와 같은 옵션들도 추가할 수 있다.

// 스타일드 컴포넌트의 스타일을 압축(minify)하는 옵션
// 압축된 스타일은 더 작은 파일 크기를 가지며, 전송 속도를 향상시킬 수 있음
// 프로덕션 환경에서 유용
"minify": true

// ES6 템플릿 리터럴 문법을 이용해 스타일을 작성할 수 있도록 허용하는 옵션
// 기본적으로 transpileTemplateLiterals가 활성화되어 있으면, 템플릿 리터럴 문법이 일반적인 문자열 문법으로 변환되어 스타일 컴포넌트를 정의할 수 있게 됨
"transpileTemplateLiterals": true

// 스타일 압축(minification) 옵션에 대한 세부 설정을 지정할 수 있음
// 이 객체를 사용하여 압축 옵션을 조정하거나 사용자 정의 압축기를 지정할 수 있음
"minifyOptions": {}

// 템플릿 리터럴 문법 변환 옵션에 대한 세부 설정을 지정할 수 있는 객체
// 이 객체를 사용하여 템플릿 리터럴 문법 변환 옵션을 조정할 수 있음
"transpileTemplateLiteralsOptions": {}