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

JavaScript React.js

Gil伽罗小宇宙

2020-03-23

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

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

我一直在研究和研究getInitialProps,但是由于以下这一行,我不确定这是我需要的完整解决方案README

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

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

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

笔记:

  • 可以确定,每个请求本质上都会导致初始页面加载。
  • 用户客户端可以与节点(Next.JS)服务器进行对话,因为它是公开的。我目前正在与在包装Next.JS试验Express服务器

提前请任何帮助

第2617篇《Next.JS:如何在服务器端发出所有请求》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
乐伽罗古一 2020.03.23

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

我已经推一个简单的例子项目的GitHub 这里

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

快速淘汰:

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

欢迎提出建议和改进!

神乐 2020.03.23

这通常是一个坏主意。

SPA的重点是防止整个页面加载。

您可以getInitialProps在初始页面请求以及随后的导航中提取内容,因为每个页面都会调用它。

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

问题类别

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