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

三世轮回 提交于 2019-12-04 08:39:12

问题


I am building a Next.JS app that will be getting data from a Python API and an Postgres Database.

Normally this would be simple, except requirements are such that I need to send all requests from the server-side, not the user's client.

I have been working with and grokking getInitialProps, but I am not confident that it is the full solution that I need because of this line in the 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.

It seems that getInitialProps is designed for the initial page load, and not for subsequent server-side data fetching.

How can I design my Next.JS app in such a way that all requests come from the server-side?

Notes:

  • It is OK that every request essentially results in an initial page load.
  • It is OK for the user Client to talk back to the Node (Next.JS) server since it's publicly-exposed. I am currently experimenting with wrapping Next.JS in an express server.

Ty in advance for any help


回答1:


I found a solution by wrapping Next.JS in Express!

I have pushed a simple example project to GitHub here

The repo has a nice README as well as comments in the code that detail what's going on.

Quick rundown:

  • Wrap Next.JS in an express server. Explicitly render pages by calling nextApp.render(...) which happens implicitly in standard Next.JS apps. See server.js
  • Use express routing. Make server-side requests prior to rendering the pages with nextApp.render(...). See server.js.
  • Use standard anchor tags to ensure that pages requests hit the express server. See index.js
  • nextApp.render provides passed values to the page in the context (ctx) parameter of getInitialProps. You can make these values available in the pages this.props by returning them in getInitialProps. See stars.js

Suggestions and improvements welcome!




回答2:


This is generally a bad idea.

The entire point of an SPA is to prevent full page loads.

You can use getInitialProps to fetch stuff while on the initial page request, and on subsequent navigations, as it is called for every page.

Next is encouraging you to use an API to talk to the server



来源:https://stackoverflow.com/questions/49950309/next-js-how-to-make-all-requests-server-side

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!