使用 Mantine 的 Nextjs 的无样式内容 (FOUC) 闪存答案

【问题标题】：Flash of Unstyled Content (FOUC) for Nextjs using Mantine使用 Mantine 的 Nextjs 的无样式内容 (FOUC) 闪存
【发布时间】：2022-06-18 08:39:00
【问题描述】：

我切换到Mantine并按照this的方法解决了FART（不准确颜色主题的Flash），但网页遇到了新问题。在页面呈现之前有一个 Unstyled 组件的闪光。如何解决这个问题？我查看了 Nextjs Github，发现问题很少 FOUC 问题，但解决方案是添加 <script>0</script>，这对我不起作用。

此错误仅在生产中，在开发中可以正常工作。

示例：https://gotrip.vercel.app 如果您没有看到 flash，请复制链接并将其粘贴到浏览器中。

import Document, { Html, Head, Main, NextScript } from "next/document";
import { createGetInitialProps } from "@mantine/next";

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...getInitialProps, ...initialProps };
    }

    render() {
        const setInitialTheme = `
      function getUserPreference() {
        if(window.localStorage.getItem('theme')) {
          return window.localStorage.getItem('theme')
        }
        return window.matchMedia('(prefers-color-scheme: dark)').matches 
          ? 'dark' 
          : 'light'
      }
      document.body.dataset.theme = getUserPreference();
    `;
        return (
            <Html>
                <Head />
                <body>
                    <script dangerouslySetInnerHTML={{ __html: setInitialTheme }} />
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

【问题讨论】：

你能描述一下闪光灯吗？我没有看到它。尝试使用 Firefox 97 和 Chrome 95 在 Private/Incognito/Guest 窗口中。
我原以为会出现暗模式 - 根据您的代码，它似乎有一个浏览器偏好，但我不确定它可能存在于哪里。
如果我不使用隐身模式并设置暗模式，然后关闭并重新打开，我确实会在整个页面上看到一闪而过的白色。这是您在谈论的那个，还是特定于一个组件？
@Codebling 在this github issue 中有一个闪烁行为的例子。此外，当我在 FireFox 中刷新 my site 时，我能够看到问题。该网站的代码可以在here on my github找到。
@Megan 你确定这和 OP 是同一个问题吗？我可以在您的网站上看到问题，但在 OP 的网站上看不到。

标签： reactjs next.js production fouc mantine

【解决方案1】：

在经历了这个Github issue之后，我在我的项目中应用了三个解决方案，因为我遇到了类似的问题。

如果有人遇到此问题，请尝试以下方法，它应该适合您。

如果您还没有完成它，请使用此 instruction 配置您的 Next.js 项目以与 Mantine 一起使用。（注意：我建议也应用可选步骤）
如果您将项目托管在 Vercel 上或用于本地开发 - 使用“yarn build”而不是 npm
如果您使用的是 12.1.6，请将 Next.js 降级到 12.1.5 或升级到更新的版本（@canary 版本）

我希望这能解决您的问题。这是我的第一个答案，所以请善待:)

【讨论】：