fetch doesn't cache when used in middleware

[IonelLupu]

I created a middleware and inside it I called the API using the fetch function, just to test if the caching works. To my surprise, it didn't.

This is my setup:

// /app/api/test/route.ts
import { NextResponse } from 'next/server'

let value = 0
export function GET(){
    value++

    return NextResponse.json({ value })
}

// /middleware.ts

export async function middleware(request: NextRequest) {

    if (request.url.includes('/cache-test')) {
        const value = await fetch(`http://localhost:3000/api/test`, {
            cache: 'force-cache',
        }).then(response => response.json())

        console.log('value ->', value)
    }
}

And I get this in the console when I go to http://localhost:3000/cache-test and refresh the page even if I use cache: 'force-cache':

value -> { value: 1 }
value -> { value: 2 }
value -> { value: 3 }
value -> { value: 4 }

Shouldn't I get value -> { value: 1 } every time?

[chriskrogh]

in the docs https://nextjs.org/docs/app/api-reference/functions/fetch#fetchurl-options they mention:

Further, Next.js polyfills fetch on both the client and the server, so you can use fetch in both Server and Client Components.

so I'm guessing this doesn't apply to middleware.

[dejanvasic85]

Hi, is there any workaround to caching fetch request in middleware?

From some other discussions I've seen, a suggestion is to use request headers to set the data you need. You would then need to use the headers method in the pages and layouts to get the data out. Not great. But works..

[IonelLupu]

@dejanvasic85 this is only for really small data. In my case, I have entire kilobytes of data. Can't do

[dejanvasic85]

Yeah this really put me off nextjs. Svelte has locals and express you can use the request object. Blows my mind that we don't have this in Next.

The only other thing I would do is create high order functions that wrap the page components. Haven't tried in app router yet but it was doable with getServerSideProps.

https://dejanvasic.wordpress.com/2021/10/27/next-getserversideprops-high-order-function-in-typescript/

[jnm733]

No progress on this? Is something important

[ivan-kleshnin]

No progress on this? Is something important

Next issue: "How to disable fetch caching in middleware?"

[amirhosseinNouri]

Any updates on this? It seems cache is not available on the middleware