如何解决React @loadable/component - 在服务器端以块的形式调用静态函数
我使用@loadable/component 和@loadable/server 来基于Route 拆分块，它适用于服务器端和客户端。
我有一个函数 fetchInitialData 附加到页面中的每个组件，可以调用它来获取响应，然后返回的响应可以通过上下文传递给组件。
分割块的代码：
const LoadableComponent = loadable(props => import(`src/pages/${props.componentName}`))
首页组件中的fetchInitialData：
// src/pages/Home.js
const Home = (props) => {}
Home.fetchInitialData = () => {
fetch('/api')
.then(response => response.json())
.then(data => data)
}
export default Home
export { Home }
我想在服务器端调用 fetchInitialData 方法，以便可以更早地获取每个页面的响应并在上下文中传递。
app.get("/*",(req,res) => {
// fetchInitialData needs to be called here based on route. Something like
// const LoadableComponent = loadable(props => import(`src/pages/${pageName}`))
// const initialData = LoadableComponent.fetchInitialData()
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
const { default: App } = nodeExtractor.requireEntrypoint()
const webExtractor = new ChunkExtractor({ statsFile: webStats })
const jsx = webExtractor.collectChunks(
<App location={req.url} context={initialData} />
)
const html = `
<html>
<head>
${webExtractor.getScriptTags()}
</head>
<body>
<div id="app-root">
${ReactDOMServer.renderToString(jsx)}
</div>
</body>
</html>
`
res.set('content-type','text/html')
res.send(html)
})
完整代码可以在github上找到 https://github.com/Vivekanand16/ssr
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
