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

Question

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

getInitialProps()，当运行在服务器上，可以从数据库中抓取数据并return它，没有任何问题。但是，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.

Answer 4

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

Answer 5

随着时间的推移，新的解决方案出现了。
Nextjs 引入了一种新方法 getServerSideProps 主要用于此类用例

getServerSideProps only runs on server-side and never runs on the browser.

Answer 6

对我来说，我发现最快的方法是从 __NEXT_DATA__

获取数据

MyApp.getInitialProps = async (): Promise<AppCustomProps> => {
  const isInBroswer = typeof window !== 'undefined';
  if (isInBroswer) {
    const appCustomPropsString =
      document.getElementById('__NEXT_DATA__')?.innerHTML;

    if (!appCustomPropsString) {
      throw new Error(`__NEXT_DATA__ script was not found`);
    }

    const appCustomProps = JSON.parse(appCustomPropsString).props;
    return appCustomProps;
  }

// server side, where I actually fetch the data from db/cms and return it
}

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

Next.js: fetching data in getInitialProps(): server-side vs client-side

javascript

ajax

express

next.js