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

Question

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

Answer 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!

Answer 2

I thinks this is done simply with getServerSideProps() Official Docs. It's as simple as it says really: "If you export an async function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps"

Answer 3

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