我正在构建一个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(使用前将#替换为@)