Hard refreshes kills data cache, can I force cache?

[bananashell]

I have this simple test component in a clean create-next-app (nextjs 14.2.15) where data.number is cached and shared between browsers.
However if one of the browsers performs a hard-refresh it revalidates for all browsers.

Is there a way to prevent this from happening?
So that the data cache is preserved even between hard refreshes?
Or is an external cache my only hope, my site is hosted on lambda.

My real world example is hitting a headless CMS where I have a limit on requests, what I thought I would do instead is revalidating tags when the CMS has updates but that kinda feels mute when a hard refresh kills the cache anyway..

// TestComponent.tsx
export const TestComponent = async () => {
    const r = await fetch("http://localhost:3001/api/number", {
        next: { tags: ["number"], revalidate: 3600 },
    });
    const data = (await r.json()) as { number: number };

    return <div>[{data.number}]</div>;
};

// server.js
const express = require("express");

const app = express();
const port = 3001;

app.get("/api/number", (req, res) => {
    console.log("GET /api/number");
    res.json({ number: Math.random() });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

[bananashell]

The behaviour is as expected when you are running a production build.
So just a misunderstanding on my part when running local dev

[bananashell]

Part of the confusion was due to this. I expected middlewares to function just as regular routes.

Caching data doesn't work in middleware #48169