Next.js:在getInitialProps()中获取数据:服务器端与客户端

Question

我正在使用Next.js,我有一个使用Express的自定义服务器.我有一个页面需要数据库中的一些数据.

getInitialProps(),当在服务器上运行时,可以从数据库中获取数据并返回它,没有任何问题.但是,getInitialProps()也可以在客户端运行(当用户最初请求不同的页面时,然后导航到此页面).在那种情况下,由于我在客户端,我显然不能只从数据库中获取数据 - 我必须使用AJAX与服务器通信并要求它为我检索它.

当然,这也意味着我已经在服务器上定义了一个新的Express路由来处理这个请求,它将包含与服务器端部分完全相同的代码getInitialProps(),这是非常不受欢迎的.

处理这个问题的最佳方法是什么？

Answer 1

getInitialProps() 始终接收请求和响应作为仅在服务器上设置的参数:

static async getInitialProps({req}){
 if(req){
   // called on server
 } else {
   // called on client
 }
}

https://github.com/zeit/next.js#fetching-data-and-component-lifecycle

Answer 2

在您的应用程序中，getInitialProps您应该向新的快速路由发出 http 请求，该路由具有从数据库中获取的逻辑。该逻辑永远不应该存在于 UI 层中。

无论您是在客户端还是在服务器上，都应该调用此路由 - 您不需要进行任何代码分支。

Answer 3

由于似乎没有好的解决方案，因此我创建并发布了一个库来为该问题提供简单而优雅的解决方案：next-express。