如何防止在初始加载React应用程序时出现白屏?

Question

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

App和上面一样简单。背景应该是黑色的，但有时在应用程序加载之前，会出现一个最初的白色屏幕。这个白屏是如何预防的?

Answer 1

所以最简单的方法就是在html文件中为你的页面主体设置一个背景色。这样就有了一个初始的背景色，当(重新)加载网站时，你就不会遇到闪光了。

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

另一个更复杂的解决方案是使用服务器端呈现。其思想是让服务器提供DOM的初始版本。在所有JavaScript代码加载并求值之后，react会对这个DOM进行区分和修改。

看一看

ReactDOMServer.renderToString(reactElement)

和

ReactDOM.hydrate()

如果你使用Node-Backend。