Next.js Architecture

Question

I am looking for some Next.js Architecture advise please 🙏

I am in the middle of migrating a very large express NodeJS app which has a custom SSR setup over to a Next.js setup.

For the current NodeJS site I have:

• A bunch of routes (which hook up controllers / apis, do fancy redirections etc)
• Have a ton of middlewares
• Ton of logic in a bunch of express controllers (these controllers do things like API calls, transforming data, validation and the SSR of some React components to form the application)
• Most of the time the NodeJS server calls other Microservice APIs (on the same VPC) to fetch data within these controllers (eg: search api, auth api, location api etc - which are all seperate REST api servers) Note: when it fetches from these APIs its done so on an internal api address only
• The React Website itself calls the same NodeJS server to fetch data via client side JS when there is a route change eg: The frontend URL would be: www.mywebsite.com.au And any api call done from the frontend is done with route: www.mywebsite.com.au/api/*

Based on all the docs i have read so far, I figure the best setup is:

1. To keep my existing express setup for routes / middlewares (for which I have a ton of) this includes the /api/* ones
2. Migrate controller fetching logic to the publically accessible express apis /api/* (which I kind of already have but need to clean up)
3. For the existing express controller routes, route these to Next.js instead and use nextApp.render to specific next pages
4. Use getInitialProps in the Next.js pages to fetch data from those apis I mentioned in 2.
5. Also add the old prop transform logic that was in the express controllers to getInitialProps

This is so that the server and client share the same logic of whats in getInitialProps - and this will make the architecture clean and give me the ability to have smooth transition to use Link.

The thing im struggling with it is step 4.

It means now on SSR of a page request it needs to call out to the public api (www.mywebsite.com.au/api/*) on getInitialProps to fetch its data.

To me seems like a performance overhead to do this as it requires a network hop to public domain mywebsite.com.au to fetch data it could have got locally on that same request (by calling localhost:3000/api/* for instance)

Any advise on how to avoid the network hop outside for server render? Can I detect if its a server render and then use an internal URL (eg: use localhost:3000/api/* on the request to the same web server) or is that not best practices when using Next.js?

Answer 1

The server needs to call out to itself to fetch its data, alot of the overhead involved with fetching data is around the delay (I.E Between the client and nearest datacenter) this will be less of a concern when its (datacenter -> datacenter).

If performance is still an issue, your next best bet will be to do SSR caching, of which there are many different methods alot you can find in a quick google search however it will depend on your hosting/setup.