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

user_2308992 0
Viewed 7429

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.

header showing up in localhost

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.

no header in production

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.

vercel nuxt.js node.js http-headers
1 Answers

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)
    })
}
user_36002380
Related