[英]@loadable/componet not loading on server side rendering
SSR 上的可加载组件不在服务器上呈现,但在客户端上运行良好。 在我的主容器页眉和页脚仅在服务器上呈现可加载组件未在服务器上加载
反应版本
"react": "^16.12.0"
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.3.0",
"react-router-redux": "^5.0.0-alpha.9"
服务器.js
<ChunkExtractorManager extractor={extractor}>
<Provider store={store}>
<StaticRouter location={location} context={context}>
<ReduxAsyncConnect routes={routes} />
</StaticRouter>
</Provider>
</ChunkExtractorManager>
客户端.js
loadableReady(() => {
hydrate(
<Provider store={store}>
<ConnectedRouter history={history}>
<ReduxAsyncConnect routes={routes} />
</ConnectedRouter>
</Provider>, document.getElementById('app') );
})
还添加了 Webpack 插件。 stats.json 文件是使用块哈希值创建的。 我在这里做错了什么?
对于 Loadable ready 组件,在你的 App 组件中,你可以用你自己选择的 Providers 包装你需要的组件:
import { loadableReady } from '@loadable/component'
loadableReady(() => {
const root = document.getElementById('main')
hydrate(<App />, root)
})
对于块:
import { renderToString } from 'react-dom/server'
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'
const statsFile = path.resolve('../dist/loadable-stats.json')
const extractor = new ChunkExtractor({ statsFile })
const html = renderToString(
<ChunkExtractorManager extractor={extractor}>
<YourApp />
</ChunkExtractorManager>,
)
const scriptTags = extractor.getScriptTags()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.