Setting Cache-Control header in Nuxt JS works on localhost but not in production

Question

As I am deploying my Nuxt JS universal app on Zeit Now, I was trying to take advantage of Zeit's Cache-Control header which is mentioned in Zeit Cache Doc.

Then I tried to look for how can I add the Cache-Control header in my Nuxt JS app and fortunately found this GitHub issue which was explaining the same thing.

Now as I was using serverMiddleware anyways in my Nuxt app to get the currently logged-in user's data using firebase-admin, so I thought I would easily add the response header in my code and so I did. In my /serverMiddleware/handleCookie.js I have it like this:

const Cookies = require('cookies')
const admin = require('../services/firebase-admin-init')

export default async (req, res, next) => {
  res.setHeader('Cache-Control', 's-maxage=1000, stale-while-revalidate')

  try {
    const authUser = await verifyCookie(req, res)

    if (authUser) {
      const userData = await fetchUserDetailsFromFirestore(
        req,
        authUser.uid,
        authUser.email_verified
      )

      if (userData) {
        next()
      }
    } else {
      next()
    }
  } catch (error) {
    console.error(error)
  }
}

Now the crazy thing is when I run dev i.e. yarn nuxt and check my site over localhost, I can easily see my added header in Chrome Network Tool.

But when I push my project to Zeit Now for hosting using now --prod and check my actual site, I do not see this header.

Now I am not understanding if I am doing something wrong, cause if I did, it should not have shown up in the localhost dev response header. I spend many days trying to fix this but went nowhere. Go no clue why this is happening. I am also using nuxt/now-builder for the Zeit deployment and here is my now.json file.

{
  "version": 2,
  "regions": ["bom1"],
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/now-builder",
      "config": {
        "serverFiles": [
          "services/firebase-admin-init.js",
          "serverMiddleware/**"
        ]
      }
    }
  ]
}

If anyone can help in this matter, it would be really helpful.

Answer 1

Your bug is related to time and async. In dev, everything works fast, but in prod, you need to wait longer for the promises to be resolved, the server is a little slow. Should be happening something like if authUser but not userdata, in this case you not has next() function.

I refactoring your middleware, the following code structure should help.

export default (req, res, next) => {
  res.setHeader('Cache-Control', 's-maxage=1000, stale-while-revalidate')

  verifyCookie(req, res)
    .then((authUser) => {
      if (authUser) {
        fetchUserDetailsFromFirestore(
          req,
          authUser.uid,
          authUser.email_verified
        )
          .then(() => {
            next()
          })
          .catch((error) => {
            console.error(error)
          })
      } else {
        next()
      }
    })
    .catch((error) => {
      console.error(error)
    })
}