Hi Community,

I have rewrites in my Next app that rewrite the request to the backend. The backend sets some cache-control headers as required. I can see these headers are coming to the browser just fine. However, the browser doesn't seem to respect the cache.

Also, my assumption was that the Vercel Edge functions also respect the cache-control headers which is also not happening. Instead, all the requests seem to miss the cache and go the backend.

I call the API using fetch. Can anyone see what could be wrong ?

(I am mainly a backend developer so please be gentle 😄 )

// next.config.js
const nextConfig = {
    async rewrites() {
        return [
            {
                source: '/api/:path((?!auth/).*)/',
                destination: process.env.DEV_API_BASE_URL + '/api/:path*/',
            },
            {
                source: '/api/:path((?!auth/).*)',
                destination: process.env.DEV_API_BASE_URL + '/api/:path*',
            },
        ]
    },
    skipTrailingSlashRedirect: true,
}

module.exports = nextConfig

// middleware.ts
import { NextResponse, NextRequest } from "next/server";
import { withMiddlewareAuthRequired, getSession } from '@auth0/nextjs-auth0/edge';

export default withMiddlewareAuthRequired(async function middleware(req: NextRequest) {

    const res = NextResponse.next();
    const user = await getSession(req, res);

    if (user) {
        const requestHeaders = new Headers(req.headers)
        requestHeaders.set('Authorization', `Bearer ${user.accessToken}`);

        const response = NextResponse.next({
            request: {
                headers: requestHeaders,
            },
        })
        return response;
    }

    return NextResponse.next()

});

export const config = {
    matcher: '/api/:path*',
};