이챙의 개발 log
Next.js 에서 material-ui,styled-components 사용🔨 style 새로고침 할때 깜빡임 현상 해결하기
이챙(leechaeng)
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 |
이챙(leechaeng)
프론트엔드 개발도 하고 뛰기도 하고