Next.js: fetching data in getInitialProps(): server-side vs client-side

Question

I'm using Next.js, and I have a custom server using Express. I have a page that requires some data from the database.

getInitialProps(), when running on the server, could just grab the data from the database and return it, without any problems. However, getInitialProps() can also run on the client side (when the user initially requests a different page, then navigates to this one). In that case, since I'm on the client side, I obviously can't just fetch the data from the database - I have to use AJAX to talk to the server and ask it to retrieve it for me.

Of course, this also means that I have define a new Express route on the server to handle this request, which will contain exactly the same code as the server-side part of getInitialProps(), which is very undesirable.

What's the best way to handle this?

Answer 1

getInitialProps() always receives the request and response as parameters which are only set on the server:

static async getInitialProps({req}){
 if(req){
   // called on server
 } else {
   // called on client
 }
}

https://github.com/zeit/next.js#fetching-data-and-component-lifecycle