React @loadable/component - 在服务器端以块的形式调用静态函数

编程问答 2022-06-02

问题描述

我使用@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 (将#修改为@）

javascriptloadable-componentreactjsreactjsserver-side-rendering