首页 文章

当浏览器接管时，React可加载服务器端重新渲染和重新获取

提问于
浏览 次
0

我一直在尝试使用带有Webpack 4的react loadable库 . 在SSR上正确加载页面（加载所有异步导入的东西） . 但是，异步组件会在一瞬间消失 . react-loadable.json似乎没有正确的信息，因为它没有获取页面的所有必需块（以某种方式在服务器端正确显示） . 当我在console.log块中只显示几个块时 . 可能这是因为某些路线是动态的吗？

请看下面的附加屏幕截图

脚本启动是补充部分

enter image description here
Parse发生在服务器端，脚本部分发生在客户端

How I capture the required chunks from react-loadable.json

renderToString(
            <Provider store={store}>
              <StaticRouter location={urlPath} context={context}>
                <Loadable.Capture report={moduleName => {modules.push(moduleName)}}>
                  <AppRoot/>
                </Loadable.Capture>
              </StaticRouter>
            </Provider>
          )



console.log('last',  getBundles(stats, modules))

Prod Server

Loadable.preloadAll().then(() => {
  app.listen(PROD_PORT, (error) => {

  })
});

Client side

Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })

Split Chunks setup

styles: {
      name: 'styles',
      test: /\.css$/,
      chunks: 'all',
      enforce: true
    },
    vendors: {
      name: 'vendors',
      chunks: 'all',
      reuseExistingChunk: true,
      priority: 20,
      enforce: true,
      test(module, chunks) {
        const name = module.nameForCondition && module.nameForCondition();
        return chunks.some(chunk => {
          return chunk.name === 'main' && /[\\/]node_modules[\\/]/.test(name);
        })
      }
    },
    common: {
      name: 'app.js',
      chunks: 'initial',
      test: /\.js$/,
      reuseExistingChunk: true,
    },

如果有必要，我很乐意提供更多信息

reactjs webpack webpack-4 react-loadable

1 回答

  • -1

    我想我的一个项目有类似的问题 . 我想我通过包装客户端功能解决了它，如下所示

    window.onload = () => { 
  Loadable.preloadReady().then(() => {
    hydrate(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppRoot />
        </ConnectedRouter>
      </Provider>,
      domRoot,
    )
  })
}
    回复于

相关问题