title: (Next.js, Express session) New session for every request made inside getInitialProps
body: <p>I am trying to make <a href="https://github.com/expressjs/session" rel="nofollow noreferrer">Express session</a> work with <a href="https://github.com/zeit/next.js/" rel="nofollow noreferrer">Next.js</a>, and have successfully done so on the client side, but I am having trouble with API calls made from inside getInitialProps.</p>
  
  <p>Note: I am using <a href="https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch" rel="nofollow noreferrer">isomorphic-unfetch</a> to make API calls. My Next.js installation runs on localhost:3000, my Express server on localhost:5000.</p>
  
  <p>Here is an example of a client side API call (outside of getInitialProps):</p>
  
  <pre><code>componentDidMount() {
    fetch('/path/to/endpoint', {
      method: 'GET',
      credentials: 'include',
    }).then((res) =&gt; console.log(res));
  }
  </code></pre>
  
  <p>I'm logging res here because I wanted to see the headers. Turns out this request has an empty headers object. If i resolve the promise I get the data I requested though. The session ID from this call stays consistent on the server even if I refresh the page. Everything is working as expected here.</p>
  
  <p>Here is an example of an API call inside getInitialProps:</p>
  
  <pre><code>static async getInitialProps(ctx) {
    fetch('/path/to/endpoint', {
      method: 'GET',
      credentials: 'include',
    }).then((res) =&gt; console.log(res.headers));
  }
  </code></pre>
  
  <p>Again, logging to see the headers. This response has headers, they look like this:</p>
  
  <pre><code>Headers {
  _headers:
  { 'x-powered-by': [ 'Express' ],
  'access-control-allow-origin': [ 'http://localhost:3000' ],
  vary: [ 'Origin, Accept-Encoding' ],
  'access-control-allow-credentials': [ 'true' ],
  'x-frame-options': [ 'SAMEORIGIN' ],
  'x-xss-protection': [ '1; mode=block' ],
  'set-cookie'['YgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS','connect.sid=s%3AYgJGcZPBgbE_nEqqLZpw0ba0pyaf2eNS.Oye%2F7%2BsyXrrLJwphEJ3nq3yMkBhM3%2Fm4PCl9KIV%2FTzA; Path=/; Expires=Sun, 05 Aug 2018 15:56:52 GMT;     HttpOnly' ],
  'content-type': [ 'application/json; charset=utf-8' ],
  'content-length': [ '246' ],
  etag: [ 'W/"f6-82FKQ+ERtkxLiKa8hEIeY4kgGgE"' ],
  date: [ 'Sun, 22 Jul 2018 15:56:52 GMT' ],
  connection: [ 'close' ] } }
  </code></pre>
  
  <p>As you can see there is  connect.sid (express session ID) in my set-cookie header, but the problem is that the connect.sid cookie changes whenever I refresh the page and does not match the session ID of client side API calls (which stays the same even after refreshing the page).</p>
  
  <p>My session object on the Express server looks like this:</p>
  
  <pre><code>app.use(
    session({
    resave: false,
    name: 'connect.sid',
    saveUninitialized: false,
    secret: SESSION_SECRET,
    unset: 'destroy',
    cookie: {
      maxAge: 3600000 * 24 * 14,
      secure: false,
    },
    store: new MongoStore({
      url: mongoUrl,
      autoReconnect: true,
    }),
  })
  </code></pre>
  
  <p>);</p>
  
  <p>If anyone has an idea how I can make API calls from inside getInitialProps work with express session I'd appreciate the input! Thank you in advance.</p>