최근에 팀프로젝트를 Next.js 13버젼과 Styled-Components를 사용하여 진행하기로 하였는데, 렌더링이 될때마다 스타일링이 한타임 늦게 되는 이슈가 있었다.
구글링하여 찾아보니까 Next.js는 SSR로 동작하는 프레임워크이고, Styled-Components는 JS를 사용한 스타일링이다보니 서버사이드에서 스타일링을 하지못하고 먼저 렌더링 된 후 스타일링이 되어서 발생한 이슈란걸 알게되었다.
해결 방법을 찾아보려고 구글링과 Chat GPT에게 물어봤지만 , Next.js 13버젼이 나온지 얼마 안돼서 해당 버젼의 글이 거의 없었다. 그래서 공식 문서를 찾아 읽어보았다.
찾아보니 공식문서에는 친절하게 관련 설정을 제공해주고 있었다.
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>
)
}
이런식으로 관련 Context파일을 만들어준 후
app/layout.tsx
import StyledComponentsRegistry from './lib/registry'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<StyledComponentsRegistry>
{children}
</StyledComponentsRegistry>
</body>
</html>
)
}Layout 컴포넌트에서 children을 래핑해주면 된다.
이렇게 설정하고 나니까 바로 스타일링이 문제없이 작동하는걸 알수 있었다.
그동안은 이슈가 생기면 대부분 구글링에 의존하였다. 아무래도 공식문서는 대부분 영어로 작성되어있고 어디서부터 어떻게 읽어야 할지 막막하고 겁부터 나서 그랬던것 같다. 하지만 Next.js 13버젼으로 프로젝트를 진행하면서 아직 관련 글이 적다보니 자연스레 공식문서를 자주 찾게 되었고, 생각보다 잘 작성되어있고 정확하게 작성되어있다보니 빠른이슈해결에 도움이 되었다. 앞으로도 더욱더 공식문서와 친해져야 겠다.
