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

2024-02-22

我正在构建一个Next.JS https://github.com/zeit/next.js将从 Python API 和 Postgres 数据库获取数据的应用程序。

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

我一直在工作并摸索getInitialProps https://github.com/zeit/next.js#fetching-data-and-component-lifecycle,但我不确定这是否是我需要的完整解决方案,因为其中的这一行README:

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

看起来getInitialProps专为初始页面加载而设计,而不是为后续服务器端数据获取而设计。

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

Notes:

  • 每个请求本质上都会导致初始页面加载,这是可以接受的。
  • 用户客户端可以与 Node (Next.JS) 服务器进行对话,因为它是公开的。我目前正在尝试将 Next.JS 包装在快递服务器 https://github.com/zeit/next.js/tree/master/examples/custom-server-express.

提前寻求任何帮助


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

我已经将一个简单的示例项目推送到了 GitHubhere https://github.com/AuthorOfTheSurf/server-side-requests-next-with-express

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

快速概述:

  • 将 Next.JS 包装在 Express 服务器中。通过调用显式渲染页面nextApp.render(...)这在标准 Next.JS 应用程序中隐式发生。看服务器.js https://github.com/AuthorOfTheSurf/server-side-requests-next-with-express/blob/master/server.js
  • 使用快速路由。在渲染页面之前发出服务器端请求nextApp.render(...). See 服务器.js https://github.com/AuthorOfTheSurf/server-side-requests-next-with-express/blob/master/server.js.
  • 使用标准锚标记来确保页面请求到达 Express 服务器。看index.js https://github.com/AuthorOfTheSurf/server-side-requests-next-with-express/blob/master/pages/index.js
  • nextApp.render向上下文中的页面提供传递的值 (ctx) 的参数getInitialProps。您可以在页面中提供这些值this.props通过将它们返回getInitialProps. See stars.js https://github.com/AuthorOfTheSurf/server-side-requests-next-with-express/blob/master/pages/stars.js

欢迎提出建议和改进!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Next.JS:如何在服务器端发出所有请求 的相关文章

随机推荐

  • notepad++ 检查重复行复杂

    Example 40000 多行 带有这样的指南 GUID 0981723409871243 在所有 GUID 中搜索重复项 Example GUID 124432408213 GUID 08917234071423 GUID 018974
  • 如何取消设置 C 中的变量以允许稍后使用具有不同数据类型的相同名称?

    我想在 C 程序中使用具有不同数据类型的相同变量名而不进行强制转换 我真的很想这么做 别问为什么 那么我该怎么做呢 如果执行时该变量不存在 我该如何处理错误预防性的取消设置 你不能 您可以获得的最接近的是创建单独的范围并在其中使用相同的变量
  • Qt - 将 QString 转换为 Unicode QByteArray

    我有一个客户端 服务器应用程序 其中客户端将使用 Qt Ubuntu 服务器将使用 C Qt 客户端将以 UTF 16 编码格式发送字符串 我已经使用 QTextCodec 类转换为 UTF 16 但每当转换发生时 它都会被填充一些更多的字
  • 如何获取引发异常的方法名

    我的代码如下所示 try productRepo GetAllProductCategories catch Exception ex Do Something 我需要一种方法来显示方法名称 假设在上述情况下 如果 GetAllProduc
  • XML 属性与元素[重复]

    这个问题在这里已经有答案了 什么时候应该使用 XML 属性以及什么时候应该使用 XML 元素 e g
  • 连接到包含 MS Access Web App 后端的 SQL Azure

    我使用 MS Access 2013 创建了一个简单的 Web 应用程序 它只有一个包含示例数据的表 我将其启动到我的共享点 在我们继续之前 我想告诉您 我正在使用 Office 365 企业版 我们需要管理 Lync SharePoint
  • cherrypy - URL 调度程序 [重复]

    这个问题在这里已经有答案了 可能的重复 在 CherryPy 中使用映射 https stackoverflow com questions 11142625 using mappings in cherrypy 如何将 url 正则表达式
  • 函数的未命名参数可以有默认值吗?

    以下代码在 C 中合法吗 void f void 0 int main f C 标准的哪一页声明这种用法是合法的 是的 这是合法的 没有标准的措辞来具体允许这种功能组合 根本没有任何可以disallow它 要么 默认参数语法适用于 a 中的
  • Java JTable 无法设置列宽

    我尝试设置列的宽度 但它根本不起作用 我一直在寻找答案几个小时 这是我的代码 任何人都可以告诉我问题是什么 提前致谢 String columns Day StratTime EndTime Description mtbl new Def
  • 谷歌测试中数组的比较?

    我正在寻找比较谷歌测试中的两个数组 在 UnitTest 中 这是通过 CHECK ARRAY EQUAL 完成的 你在谷歌测试中是如何做到的 我真的建议看看Google C 模拟框架 https github com google goo
  • 有条件替换两个数据帧 R 中的 NA

    可能是简单但棘手的问题 尤其是对于较大的数据集 给定两个数据帧 df1 df2 具有如下相同尺寸 head df1 a b c 1 0 8569720 0 45839112 NA 2 0 7789126 0 36591578 NA 3 0
  • 使用 Oracle SQL 解析 Json - JSON_TABLE

    我正在尝试使用 JSON TABLE 解析 JSON Oracle 数据库版本 12 1 0 2 Rownum 1 Name John AddressArray Address1 Address2 TextObj mName Carol l
  • Oracle 存储过程 此 SELECT 语句中需要 INTO 子句

    我有一个下面提到的存储过程 create or replace PROCEDURE example in start date IN VARCHAR2 in svc provider IN a message msg service pro
  • matplotlib 获取给定图形包含的所有轴以应用某些设置

    我正在编写一个函数来修改图形上的轴大小和位置 但是当出现双轴时 就会出现问题 import matplotlib pyplot as plt def fig layout fig vspace 0 3 function to make sp
  • 如何在mysql中插入印度泰卢固语字符

    我想将印度语言 泰卢固语 存储在我的数据库表中 但它显示 将泰卢固语数据插入我的表时 我已经验证了如下内容 SHOW VARIABLES LIKE character set system 它显示的输出如下Character set sys
  • 在 Excel 中创建列公式,仅更改一个变量

    我有一个非常基本的 Excel 文件 用于查看股票成本并计算利润 亏损百分比 我在单元格 E3 中有初始购买价格 在 F3 中有当前股价 我通过以下公式计算了 G3 的盈利 亏损百分比 F3 E3 100 100 我现在想要的是 当我在 F
  • 将远程上游添加到 bitbucket 上的 git 存储库

    对于 GitHub 我添加了一个名为upstream使用以下命令获取我的分叉存储库的最新更改 git remote add upstream email protected cdn cgi l email protection
  • 如何在 VBA/VBScript 中执行 onclick 事件

    td class highlightTab style background color red color yellow a class highlightTabLabel href 我仍在尝试通过网页学习 Excel 自动化 我试图使用
  • 错误:无法创建目录 \app\build\intermediates\incremental\packageDebug\zip-cache

    构建工作项目后突然显示错误 如何解决这个错误 错误 无法创建目录 app build intermediates incremental packageDebug zip cache 我尝试了以下解决方案 Delete gradle fro
  • Next.JS:如何在服务器端发出所有请求

    我正在构建一个Next JS https github com zeit next js将从 Python API 和 Postgres 数据库获取数据的应用程序 通常这很简单 但要求是我需要从服务器端而不是用户的客户端发送所有请求 我一直