如何在 React 应用程序初始加载期间防止白屏？

【问题标题】：How to prevent white screen during initial loading of React app?如何在 React 应用程序初始加载期间防止白屏？
【发布时间】：2021-10-24 03:56:33
【问题描述】：

function App() {
  return (
    <>
      <div
        style={{
          width: "100vw",
          height: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "black",
        }}
      >
        <Logo3 />
      </div>
    </>
  );
}

该应用程序就像上面一样简单。背景应该是黑色的，但有时会在加载应用程序之前出现一瞬间的初始白屏。这种白屏如何预防？

【问题讨论】：

标签： html css reactjs frontend web-deployment

【解决方案1】：

因此，最简单的方法是在 html 文件中为页面主体设置背景颜色。这样就有了初始背景颜色，并且在（重新）加载网站时不会出现闪烁。

<style>
    body {
      background-color: black;
    }
</style>

另一个更复杂的解决方案是使用服务器端渲染。这个想法是让服务器提供 DOM 的初始版本。在加载和评估所有 JavaScript 代码后，该 DOM 将通过 react 进行差异和更改。

看看

ReactDOMServer.renderToString(reactElement)

和

ReactDOM.hydrate()

如果您使用的是节点后端。

【讨论】：