Add support for headers in Gatsby Functions on Gatsby Cloud

[michaellopez]

This issue is a reference to my feedback in the discussion that I think is now closed. So to make sure my request doesn't disappear I re-posted it here:

The second thing I wanted to try was how the functions service handled headers. I am very keen on using cache-control headers properly to reduce function executions and accelerate our users experience. Proper cache header can make a huge difference in both regards. To my surprise functions in Gatsby currently don't support it on Gatsby Cloud. It works locally, I can control basically any header in the response locally. But on Gatsby Cloud the functions seem to be behind Varnish and no matter what I did I couldn't get it to respect my functions headers. Varnish seems to be configured to currently override the cache-control header to always be cache-control: public, max-age=0, must-revalidate. That basically forces the function to run every request to be able to calculate the 304 status code. So the user still has to wait for this calculation, but they do avoid the download of data if it is the same. Also the function executes again (for no reason) and starts chipping away at the invocation quota (for no reason). I don't mind having this approach as the default for developers that do not need to fine grained control of cache-control headers, those that just want to deploy a function and it "Just Works ™️ ", cache invalidation and all. But for us "power users" I would very much like it if Varnish or whatever you use in front of the functions would respect all headers that functions return/set.

The third thing is support for s-maxage and stale-while-revalidate. My initial testing seem to point to the fact that they are currently unsupported. Currently I see this:

< via: 1.1 varnish
< x-served-by: cache-bma1636-BMA
< x-cache: MISS
< x-cache-hits: 0

x-served-by is different for all requests and also that fact that the responses always show a fresh timestamp indicate that s-maxage isn't supported. I didn't do enough testing to check stale-while-revalidate due to this, so I'm just assuming that it is not supported either. It would make a big difference if these headers where supported by the CDN/thing in front of the functions.

That's it for now during my simple quick test.

I will continue to try function out and push them to their limits. I am very excited about this!

My test function:

// src/api/hello.ts
import { GatsbyFunctionRequest, GatsbyFunctionResponse } from "gatsby"
export default function handler(
  req: GatsbyFunctionRequest,
  res: GatsbyFunctionResponse
) {
  res.setHeader("Cache-Control", [
    "max-age=60",
    "s-maxage=60",
    "stale-while-revalidate=60",
  ])
  res.send(`I am TYPESCRIPT: ${new Date().toString()}`)
}

It is deployed at https://gswpgatsby.gatsbyjs.io/api/hello

Originally posted by @michaellopez in #30735 (comment)

[LekoArts]

For requests specific to Gatsby Cloud you should post your feedback here: https://portal.gatsbyjs.com/gatsby-cloud

[michaellopez]

OK

[KyleAMathews]

Thanks btw for your great comment! It's already led to some discussions and movement for supporting this. As @LekoArts said, the Portal is the best way to keep the conversation going on Cloud specific features.

[michaellopez]

Awesome, thanks. I created https://portal.gatsbyjs.com/gatsby-cloud/p/add-support-for-headers-in-functions looking forward to it! 🚀