组件在Next.js和Material-UI的服务器端渲染期间闪烁？

Question

组件在Next.js和Material-UI的服务器端渲染期间闪烁？

4

我是一名从事开发工作一年的开发者，我使用next.js和material-ui没有遇到过任何问题。但最近我在尝试将next.js和material-ui一起使用时遇到了一个问题，即闪烁问题。您是否也遇到了同样的问题，还是只有我遇到了？这是材料UI还是next.js的问题。那么我该如何解决这个问题。

以下是问题图片 - 请点击此处查看GIF

这是我的项目 - https://github.com/siamahnaf198/ebuy-ts

这是实时链接 - https://ebuy-ts.vercel.app/

- Samia Sammi

请提供足够的代码，以便他人更好地理解或重现问题。 - Community

我提供整个项目链接，请查看。 - Samia Sammi

git 代码与 GIF 中所看到的不同。 - Mircea Matei

@MirceaMatei，我更新了我的问题。我现在上传了实际的gif。请看一下并帮助我。 - Samia Sammi

请查看此处：https://dev59.com/xXsQtIcB2Jgan1znFL6G#75720544，它可以正常工作。 - Vigneshwaran Chandrasekaran

3个回答

1

我曾经遇到同样的问题。我通过将Next JS更新至最新版本v12.1.7-canary.41解决了这个问题。

不要使用UseEffect，因为它会增加Time to First Byte（TTFB），从而导致你的页面无法被谷歌排名。

- Alouani Younes

这对我也起作用了。我安装了next@canary。 - Gabriel Linassi

0

在_document文件中尝试这个。将您的getInitialProps替换为下面在_document文件中的那个。

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()],
    };
};

- Mircea Matei

在 const sheets = new ServerStyleSheets(); 中，我应该在哪里找到 ServerStyleSheets？ - Samia Sammi

import { ServerStyleSheets } from '@mui/styles'; // 如果您更喜欢使用@material-ui/core/styles，则可以使用它。 - Mircea Matei

这个问题解决了吗？ - Bryan Lumbantobing

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy · Accepted Answer

在为这个问题苦苦挣扎几天之后，我采用了以下修复/妥协方法...

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>
  );
}