title: Next.js Architecture
body: <p>I am looking for some Next.js Architecture advise please </p>
  
  <p>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.</p>
  
  <p>For the current NodeJS site I have:</p>
  
  <ul>
  <li>A bunch of routes (which hook up controllers / apis, do fancy redirections etc)</li>
  <li>Have a ton of middlewares </li>
  <li>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)</li>
  <li>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) <strong>Note:</strong> when it fetches from these APIs its done so on an internal api address only </li>
  <li>The React Website itself calls the same NodeJS server to fetch data via client side JS when there is a route change <code>eg:</code> The frontend URL would be: <code>www.mywebsite.com.au</code>
  And any api call done from the frontend is done with route: <code>www.mywebsite.com.au/api/*</code></li>
  </ul>
  
  <p>Based on all the docs i have read so far, I figure the best setup is:</p>
  
  <ol>
  <li>To keep my existing express setup for routes / middlewares (for which I have a ton of) this includes the <code>/api/*</code> ones</li>
  <li>Migrate controller fetching logic to the publically accessible express apis <code>/api/*</code> (which I kind of already have but need to clean up)</li>
  <li>For the existing express controller routes, route these to Next.js instead and use <code>nextApp.render</code> to specific next pages</li>
  <li>Use <code>getInitialProps</code> in the Next.js pages to fetch data from those apis I mentioned in 2.</li>
  <li>Also add the old prop transform logic that was in the express controllers to <code>getInitialProps</code></li>
  </ol>
  
  <p>This is so that the server and client share the same logic of whats in <code>getInitialProps</code> - and this will make the architecture clean and give me the ability to have smooth transition to use <code>Link</code>.</p>
  
  <p>The thing im struggling with it is step 4.</p>
  
  <p>It means now on SSR of a page request it needs to call out to the public api (<code>www.mywebsite.com.au/api/*</code>) on <code>getInitialProps</code> to fetch its data.</p>
  
  <p>To me seems like a performance overhead to do this as it requires a network hop to public domain <code>mywebsite.com.au</code> to fetch data it could have got locally on that same request (by calling <code>localhost:3000/api/*</code> for instance) </p>
  
  <p>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 <code>localhost:3000/api/*</code> on the request to the same web server) or is that not best practices when using Next.js? </p>