Components flicker during server side render for nextjs and material-ui?

user_19093107 0
Viewed 1099

I am a developer from one year. I am using next js with material-ui without any problem. But recently I am facing one problem when I am try to use next js and material-ui together. That is the flickering issue. Are you facing the same problem or only I am? Is it issue with material ui or next js. Then how can I solve the problem.

Here is issue immage- Please click here to see the Gif

Here is my project- https://github.com/siamahnaf198/ebuy-ts

This is live link- https://ebuy-ts.vercel.app/

material-ui next.js reactjs
3 Answers

So after struggling with this issue for a couple of days.. I have gone with the following fix / hack...

export function MuiApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  const [mounted, setMounted] = React.useState(false)
  React.useEffect(() => {
    setMounted(true)
  }, [])
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <div style={{ visibility: mounted ? 'visible' : 'hidden' }}>
          <Component {...pageProps} />
        </div>
      </ThemeProvider>
    </CacheProvider>
  );
}
user_154193820

I faced the same problem. I solved it by updating Next JS to the latest version : v12.1.7-canary.41

Don't use Use UseEffect, because It will increase Time to First Byte (TTFB) and thus causing your pages to be unranked from google.

user_86211570

Try this in the _document file. Replace your getInitialProps with the one bellow in the _document file.

MyDocument.getInitialProps = async (ctx) => {
    const sheets = new ServerStyleSheets();

    const originalRenderPage = ctx.renderPage;

    // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
    // However, be aware that it can have global side effects.
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    ctx.renderPage = () =>
        originalRenderPage({
            enhanceApp: (App: any) =>
                function EnhanceApp(props) {
                    return sheets.collect(<App emotionCache={cache} {...props} />);
                },
        });

    const initialProps = await Document.getInitialProps(ctx);
    // This is important. It prevents emotion to render invalid HTML.
    // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
        <style
            data-emotion={`${style.key} ${style.ids.join(' ')}`}
            key={style.key}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: style.css }}
        />
    ));

    return {
        ...initialProps,
        styles: [...emotionStyleTags, sheets.getStyleElement()],
    };
};
user_118119810
Related