Memoization and Request Caching for Middleware

[altyntsevlexus]

Hello! Looking for ideas and help with caching and memoization in NextJS 14 app router.

Our team goal is to reduce the number of duplicate requests in the same render.

We fetch a GET request (Ex. "api.com/get-data") to external API in three places:

• server component to show data
• generateMetadata to manage meta robots tag related on data
• middleware.ts to manage x-robots-tag related on data

In case of server component and generateMetadata there is no problems with Memoization and only one request is being sent. However, as we know memoization only applies to the React Component tree. This means fetch inside middleware.ts duplicates with memoized requests and we have two requests instead of one.

As we understand the main problem is that NextJS middleware only supports the Edge runtime. The Node.js runtime cannot be used. So as a result memoization and caching isn’t working.

We can try cache requests in custom key-value store.

Firstly we’ve found out that in NextJS 14 has custom cacheHandler and examples with using a custom Redis cache handler @neshca/cache-handler:

https://github.com/vercel/next.js/tree/canary/examples/cache-handler-redis
https://github.com/caching-tools/next-shared-cache/tree/canary/packages/cache-handler

Unfortunately, it didn’t work for us. Cache handler doesn’t seem to trigger in Edge runtime at all.

So we decided to use Redis manually. But, as Redis can’t be ran in Edge runtime we’ve created and Route Handler that has setter and getter (/api/redis/get and /api/redis/set). Also there is an Upstash that has own REST Api for Redis. There is a article about using Redis with Upstash.

Redis with REST is working, but we are looking for other solutions too.

Share your experience with requests memoization/caching. Thank you in advance.

[bookernath]

I created a library to solve this which uses the new Vercel Runtime Cache to provide SWR cache in middleware: https://www.npmjs.com/package/cached-middleware-fetch-next