styled-components를 이용하여 스타일링하고 Next.js 앱을 켜면 처음에 CSS가 완전히 로딩되지 않은 듯한 모습이 보이게 되는데, 흉한 맨얼굴이 그대로 드러나니 사용자 경험이 꽤 나쁘다. 이것은 스타일이 Client side에서 적용되고 있기 때문이다. 이를 해결하기 위해서는 커스텀 Document를 만들고, ServerStyleSheet를 이용해서 <App/> 컴포넌트의 모든 스타일을 서버 사이드에서 적용될 수 있도록 바꾸어야한다.
babel-plugin-styled-components 설치
먼저 babel-plugin-styled-components를 설치한다.
yarn add babel-plugin-styled-components
.babelrc에서 SSR를 사용하도록 설정
.babelrc에는 다음과 같이 설정한다.
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
Custom document 작성
pages/_document.tsx를 작성한다.
import React, { ReactElement } from "react";
import Document, {
DocumentInitialProps,
DocumentContext,
Html,
Main,
NextScript,
Head,
} from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise<DocumentInitialProps> {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>,
],
};
} finally {
sheet.seal();
}
}
render(): ReactElement {
return (
<Html lang="ko">
<Head></Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}앱이 렌더링 될때, ServerStyleSheet를 생성하고, Context API를 통해 React tree에 스타일을 주입한다.
<Document/>는 Html, Head, Body등 모든 태그들을 감싸고, renderPage()를 통해 Server side에서 동기적으로 렌더를 하게된다.
js로 작성된 예시는 참고자료 StackOverFlow의 답변을 확인하면된다.
참고자료
https://medium.com/swlh/server-side-rendering-styled-components-with-nextjs-1db1353e915e
https://stackoverflow.com/questions/59672605/styled-components-delay-setting-property-in-nextjs
https://stackoverflow.com/questions/67087999/how-to-properly-type-the-document-tsx-file-from-next-js
'프로그래밍 > JS, Node.js' 카테고리의 다른 글
| CloudFlare KV로 앱 점검시간 관리하기 (1) | 2023.01.21 |
|---|---|
| [typescript] 어두운 색깔인지 확인 (isDarkColor, HEX, RGB, tinycolor) (0) | 2022.08.14 |
| [Next.js] next/image 이미지 로딩이 너무 느릴때 (0) | 2022.08.05 |
| [Next.js] MongoDB 연결하기 (next-connect, typescript) (0) | 2022.06.26 |
| [Next.js] 개발 모드에서 useEffect가 두 번 호출될때 (0) | 2022.06.25 |