Next.JS: 如何在服务器端发出所有请求

Next.JS: How to make ALL requests server-side

我正在构建一个 Next.JS 应用程序,它将从 Python API 和 Postgres 数据库中获取数据。

通常这很简单,除了要求我需要从服务器端发送所有请求,而不是用户的客户端。

我一直在研究 getInitialProps,但我不确定它是否是我需要的完整解决方案,因为 README:

中的这一行

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.

似乎getInitialProps是为初始页面加载而设计的,而不是为后续的服务器端数据获取而设计的。

如何设计我的 Next.JS 应用程序,使所有请求都来自服务器端?

备注:

如有任何帮助请提前联系

我通过在 Express 中包装 Next.JS 找到了解决方案!

我已经推送了一个简单的示例项目到GitHubhere

该存储库有一个很好的自述文件以及代码中的注释,详细说明了正在发生的事情。

简要说明:

  • 将 Next.JS 包装在快速服务器中。通过调用 nextApp.render(...) 显式呈现页面,这在标准 Next.JS 应用程序中隐式发生。参见 server.js
  • 使用快速路由。在使用 nextApp.render(...) 呈现页面之前发出服务器端请求。参见 server.js
  • 使用标准锚标记确保页面请求到达快速服务器。参见 index.js
  • nextApp.rendergetInitialProps 的上下文 (ctx) 参数中提供传递给页面的值。您可以通过在 getInitialProps 中返回这些值,使它们在页面 this.props 中可用。参见 stars.js

欢迎提出建议和改进!

这通常是个坏主意。

SPA 的全部意义在于防止加载整页。

您可以使用 getInitialProps 在初始页面请求和后续导航中获取内容,因为它会在每个页面上调用。

接下来鼓励您使用 API 与服务器对话

我认为这只需 getServerSideProps() Official Docs 即可完成。它就像它所说的一样简单:“如果你从一个页面导出一个名为 getServerSideProps 的异步函数,Next.js 将在 each 请求上使用由getServerSideProps