How to cache individual resources when returning a collection of that resource?

Question

I'm sure that this must be either a well solved problem, or there's a good reason why it's not a good idea, but my google-fu is failing me here.

Say I have an express endpoint like this:

const allUsers = [
    {
        id: "1",
        name: "Alice Smith"
    },
    {
        id: "2",
        name: "Bob Smith"
    }
]; 

app.get("/users", (req, res) => {
    res.setHeader("Cache-Control", "max-age=60"); 
    res.status(200).send(allUsers)
});

This works fine, when my browser attempts the refetch the /users endpoint within the 60 seconds, it just uses the browser cache.

The problem is, say I have an endpoint for an individual user:

app.get("/users/:id", (req, res) => {

    const id = req.params.id; 
    const user = allUsers.find((v) => v.id === id); 
    res.setHeader("Cache-Control", "max-age=60"); 
    res.status(200).send(user)
});

Sure, this will similarly cache results for subsequent calls that particular endpoint.

However, what I really want to do is have the server tell the browser, when the browser does that first fetch of /users to, 'Hey, also cache /users/1 and /users/2, destructure the response body to work out the values'.

Is this in anyway possible, or has such a mechanism ever been proposed?

Is there any mechanism within a browser, to programmatically set endpoint caches, without actually calling the endpoint?