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

JavaScript React.js

伽罗理查德

2020-03-23

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

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

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

处理此问题的最佳方法是什么?

第2616篇《Next.js:在getInitialProps()中获取数据:服务器端与客户端》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
路易Harry 2020.03.23

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

小胖Gil 2020.03.23

使API与您的next.js应用程序不同。将下一个应用程序视为恰巧在服务器上呈现页面的前端客户端

Stafan路易 2020.03.23

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

然后,无论您是在客户端还是在服务器上,都应调用此路由-无需执行任何代码分支。

小宇宙 2020.03.23

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android