Next.js: getInitialProps api request to my own server doesn't get access to session object during server side rendering

[paulwehner]

I am trying to use getInitialProps to grab the data necessary for my page to render. I was hoping to do something like this:

static async getInitialProps ({req, query}) {
  let accounts = []
  const response = await axios.get('http://localhost:3000/api/accounts')
  if(response && response.data){
    accounts = response.data
  }
  return { accounts }
  }

What I find though is that if the page is loaded coming from a , the axios request has the headers you would expect for a client side request and the server provides the correct req.session info to the '/api/accounts' endpoint.

If however the page is loaded directly with server side rendering, then the axios request has headers that look like this:

{ accept: 'application/json, text/plain, /',
'user-agent': 'axios/0.16.2',
host: 'localhost:3000',
connection: 'close' }

And the real issue, the req.session object is empty, and thus the '/api/accounts' endpoint is missing session info that it needs.

I realize that one way to solve this problem is to create an endpoint for the page I'm trying to load on the server, and in that endpoint do the additional data queries that I need, and then the data will be passed to the page component.

To keep things simpler though, I was hoping to avoid creating a server side endpoint for the page, and only use the next.js default routing, and have that simple axios request in getInitialProps that pulls the data I need whether the request occurs during client side rendering or server side rendering.

Is it possible for the axios request which is going to my own server to have access to the session object during server side rendering?

[bntzio]

Yeah, that's what next.js does, getInitialProps renders both in the server and the client.

When you do a console.log(response.data) right before the return what do you get? (check the terminal)

[sergiodxa]

You need to get your session from the req object in getInitialProps when server rendering and pass it to your API manually when doing the HTTP request.

[bntzio]

Also, note that the accounts variable is undefined coz you receive an Object from the axios response.data, and the variable accounts is an Array, you need to push it.

[paulwehner]

You need to get your session from the req object in getInitialProps when server rendering and pass it to your API manually when doing the HTTP request.

This is what I did and it worked.

[bntzio]

@paulwehner awesome! 👍
@sergiodxa close issue? 🙂

[timneutkens]

@bntzio done 🤗

[paulwehner]

This was working before, but for whatever reason the session isn't being passed through anymore to the API when using Axios.

What is ever weirder, it works perfectly fine locally, but when I push it to Heroku, the Axios request isn't passing through the data / body as part of the GET request when the page is loaded server side.

The same behavior occurs with a POST request as well. It works locally, but on Heroku server side Axios requests aren't passing through the body.

static async getInitialProps ({req, query}) {
    let selected_account = getSelectedAccount(req)
    let stickers = null;
    let session = req && req.session ? req.session : null
    let url = req && req.headers && req.headers.host ? 'http://'+req.headers.host : window.location.origin

    try{
      //get Stickers
      const response = await axios({
        method: 'get',
        url: url+'/api/stickers?user_id='+selected_account.user_id,
    credentials: 'same-origin',
        data: {'session':session}
      })
      if(response && response.data && typeof response.data !== 'undefined' && response.data.data && typeof response.data.data !== 'undefined'){
        stickers = response.data.data
      }
    } catch(error){
      console.error(error)
    }

    return { stickers, selected_account }
}