启动客户端时 React SSR 闪烁只是客户只是服务器客户端和服务器端

如何解决启动客户端时 React SSR 闪烁只是客户只是服务器客户端和服务器端

简化我的帖子：

我的 ssr 网页在启动客户端时闪烁，这意味着页面呈现服务器端呈现的 html，然后变为空白，然后重新开始加载所有内容。

查看细节：

我正在处理一个 React 项目，我们决定将它从在客户端中呈现到在服务器中呈现。该项目包括 react-router-dom,redux 和 react-redux,material-ui ，它带有 react-jss,loadable/component ，还通过 {{1 }} ，并且在 ssr 中它使用 react-helmet-async 这似乎是必须的。

对于 express.js，我做了文档上的所有内容。在客户端中使用 react-router-dom，在 ssr 中使用 browserRouter 并将 StaticRouter 对象传递给它。
对于 context 和 redux，我将 react-redux 保存在窗口中的一个变量中并在客户端获取它，然后将其传递给 store。还获取了一些外部数据以获取源上的内容页面。所以我在 ssr 中有一些请求和数据获取。
对于 preloaded_state，我创建了一个 material-ui 并收集了整个项目的所有样式。
对于new serverSideStyleSheet，我为每个页面设置了不同的react-helmet-async 标签，这些标签收集不同的标题、描述和……个人。还有一个Helmet 包装器用于csr 和ssr。
起初我使用 helmetProvider 但它与 react-helmet 不兼容。我没有改变 react-helmet-async 虽然我没有使用 renderToNodeStream 但保持它迁移到 {{ 1}} 希望有一天。
关于 renderToNodeStream 我正在按照文档说的那样使用它，但是在我添加 renderToNodeStream 之后，我无法通过添加 express.js 来获得成功的服务器端渲染。所以我必须在 loadable/component 中添加我想在服务器中呈现的每个网址。
关于该项目的另一件事是我没有弹出并使用 create-react-app 创建它，并且没有 webpack 配置或 babelrc，而是我使用了 craco.config.js
最后一件事是我从 ssr 中排除了 index.html，而是我自己在 SSR.js 文件中制作了标签，因此 index.html 只在客户端中呈现。我非常小心地在 ssr 中编写标签，就像它们在 index.html 中一样

解决方案但不是解决方案：

出现此问题是因为我在 app.get('*',ServerSideRender) 中使用了可加载组件。所以当我以正常方式导入组件时，没有闪烁，一切都很好，但未使用的 js 会降低我页面的性能分数。我需要可加载组件停止使页面闪烁。

深入代码：

只是客户

index.html : 只在客户端呈现

app.get(url,ServerSideRender)

index.js : 只在客户端呈现

Router.js

只是服务器

ssrIndex.js

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <Meta name="robots" content="noindex,nofollow" />
    <Meta data-rh="true" name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" />
    <link href="%PUBLIC_URL%/fonts.css" rel="stylesheet" />
</head>
<body>
    <div id="root"></div>
    <script src="%PUBLIC_URL%/main.js"></script>
</body>
</html>

SSR.js

import React from 'react'
import ReactDOM from 'react-dom'
import {loadableReady} from '@loadable/component'
import App from './App'
import {browserRouter} from 'react-router-dom'
import {HelmetProvider} from 'react-helmet-async'
import { Provider } from 'react-redux'

loadableReady(() => {
    const preloadedState = window.__PRELOADED_STATE__
    delete window.__PRELOADED_STATE__

    ReactDOM.hydrate(
      <browserRouter>
        <HelmetProvider>
          <Provider store={store(preloadedState)}>
            <App />
          </Provider>{" "}
        </HelmetProvider>
      </browserRouter>,document.getElementById("root")
    );
})

客户端和服务器端

App.js

require('ignore-styles')

require('@babel/register')({
    ignore: [/(node_modules)/],presets: ['@babel/preset-env','@babel/preset-react'],plugins: [
        '@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties','babel-plugin-dynamic-import-node','@babel/plugin-transform-modules-commonjs','@loadable/babel-plugin',],})

// Import the rest of our application.
require('./SSR.js')

当我说谢谢你的时间时，我是认真的。我很乐意听到任何建议或解决方案。

启动客户端时 React SSR 闪烁 只是客户只是服务器客户端和服务器端

如何解决启动客户端时 React SSR 闪烁 只是客户只是服务器客户端和服务器端