我怎样才能拥有 Next.js 之类的数据获取(getInitialProps)与React Router和React Loadable使用Razzle。我在没有 react-loadable但没有代码拆分的情况下获取数据,应用程序包太大,为客户端加载页面需要很长时间。
这段代码有效,但我只是不明白我一年前做了什么(它与前面的例子有点不同)
const promises = routes
.map((route) => {
const match = matchPath(req.url, route)
if (match && route.component) {
let promise
if (typeof route.component.preload === "function") {
promise = route.component.preload()
} else {
promise = Promise.resolve(route.component)
}
return promise
.then((res) => {
return res && res.__esModule ? res.default : res
})
.then((component) => {
let promises = []
// STATIC INTI ACTION
promises.push(store.dispatch(getToken()))
if (component.initialAction) {
let results = component.initialAction({ match })
results = Array.isArray(results)
? results
: [results]
results.forEach((result) => {
promises.push(store.dispatch(result))
})
}
return promises
})
}
return null
})
.filter((el) => el !== null)
// page not found
if (promises.length === 0) {
renderTree(req, res, store)
} else {
Promise.all(promises.map((data) => data.then((moreData) => moreData)))
.then((data) => {
Promise.all(data[0]).then(() => renderTree(req, res, store))
})
服务器.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>
}
}
React Loadable Component 具有可以加载 Component 的 preload() 方法,所以我尝试了:
route.component.preload()
但它不起作用。
我尝试了可加载组件,它也有同样的问题,但我可以用可加载组件替换反应加载(我首选的库是可加载组件,因为它可以使用 StrictMode)。
实际上,after.js解决了这个问题(它使用 Razzle),如果我可以提取代码拆分逻辑并在我的应用程序中使用它,或者有一些数据获取和react-loadable的工作示例,那就太棒了。