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

IT技术 javascript reactjs typescript server-side nextjs
2021-05-16 10:56:39

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

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

我一直在与 grokking 合作getInitialProps,但我不相信这是我需要的完整解决方案,因为以下内容中的这一行README

对于初始页面加载,getInitialProps将仅在服务器上执行。getInitialProps仅当通过 Link 组件或使用路由 API 导航到不同的路由时,才会在客户端上执行。

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

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

笔记:

  • 每个请求本质上都会导致初始页面加载是可以的。
  • 用户客户端可以与 Node (Next.JS) 服务器对话,因为它是公开的。我目前正在尝试将 Next.JS 包装在express server 中

提前获得任何帮助

3个回答

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

我已将一个简单的示例项目推送到 GitHub此处

该 repo 有一个很好的 README 以及详细说明正在发生的事情的代码中的注释。

快速概述:

  • 将 Next.JS 包装在一个快速服务器中。通过调用nextApp.render(...)在标准 Next.JS 应用程序中隐式发生的显式呈现页面参见server.js
  • 使用快速路由。在使用nextApp.render(...). 请参阅server.js
  • 使用标准的锚标记来确保页面请求到达 express 服务器。参见index.js
  • nextApp.render在 的上下文 ( ctx) 参数中向页面提供传递的值getInitialProps您可以this.props通过在getInitialProps. stars.js

欢迎提出建议和改进!

这通常是一个坏主意。

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

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

接下来是鼓励您使用 API 与服务器通信

我认为这只是通过getServerSideProps() Official Docs 完成的正如它所说的一样简单:“如果您从页面导出一个名为 getServerSideProps 的异步函数,Next.js 将使用 getServerSideProps 返回的数据每个请求上预渲染此页面