Next.js 에서 material-ui,styled-components 사용🔨 style 새로고침 할때 깜빡임 현상 해결하기
2021. 9. 13. 21:23ㆍnext.js
Next.js 배포후 스타일이 새로고침 할때 풀렸다가 다시 적용되는 현상을 발견했다.
개발모드에서는 로딩이 느리기 때문에 넘어갔었던 문제인데 배포하니 스타일이 아예 풀렸다가 다시 적용이 되었었다.
이건 백프로 styled-components 에 문제가 있을것이다 라고 생각을하고
코드를 뒤적거리며 검색을 한 결과..!
_document.js 문제였다
수정전
import { ServerStyleSheet } from "styled-components"
import { ServerStyleSheets } from "@material-ui/core/styles"
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
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)
const styleTags = sheet.getStyleElement()
return {
...initialProps,
styleTags,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal()
}
}
render() {
return (
<Html>
<Head>
{this.props.styleTags}
</Head>
<body>
<Main />
</Html>
)
}
}
MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets()
const originalRenderPage = ctx.renderPage
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
}
}
처음에 ssr문제때문에 material-ui, styled-components 각각 document.js 에 세팅해줘야 하는 부분을
따로 코드를 넣어줬었는데 이부분이 문제가 된거였다..
어이없는 실수 😅😅
수정후
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '@material-ui/styles';
class MyDocument extends Document {
static async getInitialProps (ctx) {
const styledComponentsSheet = new ServerStyleSheet()
const materialSheets = new ServerStyleSheets()
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () => originalRenderPage({
enhanceApp: App => props => styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />))
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<React.Fragment>
{initialProps.styles}
{materialSheets.getStyleElement()}
{styledComponentsSheet.getStyleElement()}
</React.Fragment>
)
}
} finally {
styledComponentsSheet.seal()
}
}
render() {
return (
<html>
<Head>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
export default MyDocument;
위의 코드로 문제를 해결하였다.
_documnet.js를 보고 왜 따로 적용을 해놨지.. 라는 의문이 들어서 문제를 금방 해결할수 있었다.
다행히 수정후 배포환경에서 깜빡임 현상이 사라졌다!
반응형
'next.js' 카테고리의 다른 글
| Next.js Image 컴포넌트 경로 설정하기 사용방법(이미지가 안나온다면..?) (0) | 2022.01.20 |
|---|---|
| Next.js 에서 반응형(Responsive) 작업하기 (window is not defined) (0) | 2022.01.14 |
| Next.js Vercel 로 프론트(static html) 배포하기 (0) | 2021.09.10 |
| next.js 데이터 가져오기 getServerSideprops, getStaticProps, getStaticPaths (3) | 2021.08.07 |
| next.js Link 와 useRouter를 사용해 props 전달하기 (0) | 2021.07.19 |