静态文件、React Hydrate与懒加载引发的白屏闪烁问题

• 使用react-spa-prerender生成静态HTML文件，页面加载时存在异常：先短暂渲染预渲染内容，随后变为白屏，之后再次完成渲染。
• 该问题仅在启用懒加载时触发，当前使用React 16.13版本，属于该工具的已知问题。

现有代码片段 #

index.js中的渲染逻辑 #

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

App组件的Suspense使用 #

render() {
  return (
    <div id='site-root'>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <React.Suspense fallback={<div />}>
            ...

内容的提问来源于stack exchange，提问作者David Long