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

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

Answer 3

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

Answer 4

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

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

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（）中获取数据：服务器端与客户端

6 个答案: