Javascript 如何在React中使用React可加载和获取组件数据（如Next.js）进行服务器端渲染？

如何使用和使用Next.js一样的数据获取（）。我有，但没有代码拆分，应用程序包太大，为客户端加载页面需要花费太长时间

这段代码可以工作，但我不明白大约一年前我做了什么（它与上一个示例有点不同）

Server.js

const promises = []

routes.some((route) => {
    const match = matchPath(req.url, route);
    if (match) {
        // route.component is React Loadable Component so getInitialData is undefined
        if (route.component.getInitialData) {
            promises.push(route.component.getInitialData({ match, req, res }))
        }
        return true;
    }
    return false;
});

Promise.all(promises)
    .then(renderReact)
    .catch(handleError)

// and at the end i will call
Loadable.preloadAll()
  .then(sendResponseToUser)

路线：

[
    {
        path: "/",
        exact: true,
        component: Loadable({
            loader: () => import("@views/Home"),
            loading: Loading,
        }),
    },
    {
        path: "/shop",
        exact: true,
        component: Loadable({
            loader: () => import("@views/Shop"),
            loading: Loading,
        }),
    },
]

我的组件如下所示：

class Home extends React.Component {
  // This works similarly to Next.js's `getInitialProps`
  static getInitialData({ match, req, res }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          text: `
This text is server rendered if and only if it's the initial render.
Go to another route.
          `,
          currentRoute: match.pathname,
        });
      }, 500);
    });
  }

  render() {
    return <p>this is just a test</p>
  }

}

class Home扩展了React.Component{
//这与Next.js的`getInitialProps'类似`
静态getInitialData（{match，req，res}）{
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
决心({
正文：`
当且仅当此文本是初始渲染时，此文本才由服务器渲染。
去另一条路线。
`,
currentRoute:match.pathname，
});
}, 500);
});
}
render（）{
return这只是一个测试

}
}

React Loadable Component具有可以加载组件的preload（）方法，因此我尝试了：

route.component.preload（）

但它不工作

我尝试了可加载组件，它也有同样的问题，但我可以用可加载组件替换react loadable（我首选的库是可加载组件，因为它可以使用StrictMode）

---

实际上，解决了这个问题（它使用Razzle），如果我能提取代码拆分逻辑并在我的应用程序中使用它，或者有一些和一起工作的示例，那就太棒了。

我就是这样做的

这两种方法都适用。可加载组件和普通组件

内部匹配路由（）。检查是否存在组件。预加载

如果为true，则允许它加载component.preload（）

这将返回一个承诺，在承诺解决后，我们将获得我们的组件。 然后检查loadData/getInitialProps/fetchData，不管我们使用的是什么静态方法名

返回res.default.loadData？res.default.loadData（store）：空

您可以调用服务器端获取请求。。我称之为loadData（）

永远记住回报承诺，因为这是一个承诺链

在redux操作中，始终记住返回dispatch（）


app.get（'*'，（req，res）=>{
//存储每个传入请求的实例
常量存储=创建存储（req）；
//从api加载数据…在呈现之前
常量承诺=匹配路由（路由，请求路径）
.map（（comp）=>{
控制台日志（组件、组件路由、组件加载数据）
if（组件布线组件预加载）{
console.log（“可加载组件”）
comp.route.component.preload（）然后（res=>{
返回res.default.loadData？res.default.loadData（store）：空；
})
}
返回comp.route.component.loadData？comp.route.component.loadData（存储）：空；
})
.map（promise=>{
如果（承诺）{
返回新承诺（（解决、拒绝）=>{
承诺。然后（下决心）。抓住（下决心）；
});
}
});
承诺。所有（承诺）。然后（（）=>{
console.log（store.getState（））
const context={}；
const content=呈现程序（请求、存储、上下文）；
if（context.url）{
返回res.redirect（301，context.url）；
}
if（context.notFound）{
物质状态（404）；
}
Loadable.prelodall（）。然后（（）=>{
res.send（内容）；
});
});
});
class Home extends React.Component {
  // This works similarly to Next.js's `getInitialProps`
  static getInitialData({ match, req, res }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          text: `
This text is server rendered if and only if it's the initial render.
Go to another route.
          `,
          currentRoute: match.pathname,
        });
      }, 500);
    });
  }

  render() {
    return <p>this is just a test</p>
  }

}