위 이미지에서 이상한점이 보이시나요?
url을 치고 들어갈때 css 가 적용이 안된 상태로 0.1초정도 있다가 css가 뒤늦게 적용되는 모습이 보이실 겁니다.
굉장히 거슬렸고 저는 오류라고 판단해 구글링을 시작했습니다.
역시 저 이외에도 비슷한 증상을 겪는 분들이 많았고 해결방법도 의외로 쉽게 찾을 수 있었습니다.
이런 현상이 발생되는 이유를 추측해보자면 nextjs는 ssr형식으로 렌더링을 진행하고 클라이언트에게 렌더링된 웹사이트를 보내줍니다.
이때 styled-components는 렌더링이 안된채로 클라이언트에게 보내지고 html만 파싱된 상태에서 styled-components가 클라이언트에서 적용되는 것이라고 추측하고 있습니다.
서버측에서 styled-components가 적용되고 클라이언트에 보내지도록 설정을 하면 되는 간단한 문제였습니다.
yarn add -D babel-plugin-styled-components
.babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
./page/_documents.tsx
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
import { ServerStyleSheet } from "styled-components";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
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() {
return (
<Html>
<Head>
{this.props.styles}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
위 설정으로 해결됐습니다.
nextjs를 하면서 정말 많은 오류를 만납니다.
처음 사용하는 프레임워크라서 개발시간이 많이 느리긴 하지만 많이 배우고 있다는 느낌을 받네요.
