새로고침 할 때 마다 잠깐의 깜빡임과 함께 CSS가 풀리는 오류가 있었다.
무슨 문제인지 검색해보니 Styled-Component의 동작방식이 SSR(Server Side Rendering), SSG(Static Site Generation) 환경과 서버 컴포넌트에서 스타일링이 어렵다는 점이었다.
⚒️ Styled-Component의 동작 방식
styled-component는 클라이언트가 런타임일 때, 스타일시트를 생성하고 <style/> 요소로 DOM에 주입한다. 프로젝트가 실행 중일 때 DOM요소에 주입되는 것이다. 서버사이드에서 동작하게 된다면 서버에서 HTML이 생성되고 style은 클라이언트 런타임 때 생성되고 주입되므로 잠깐의 시간동안 깜빡임이 존재하는 것이다.
SSR을 지원하는 Next.js의 공식문서에도 경고문구가 있다.
📍 해결하기
next.config.js 추가
module.exports = {
compiler: {
styledComponents: true,
},
}lib/registry.tsx 생성
'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode
}) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children}
</StyleSheetManager>
)
}layout 적용
import StyledComponentsRegistry from './lib/registry'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
)
}SWC plugin 설정
npm i -D @swc/plugin-styled-components.swcrc 추가
{
"jsc": {
"experimental": {
"plugins": [
[
"@swc/plugin-styled-components",
{
"ssr": true
}
]
]
}
}
}참고
흘러가는 대로 삽니다.
유익하네요. 잘 보고 갑니다!