So I have layouts like this:
<Header> Static Page <Footer>

<Header> Dynamic page <Footer>

And inside my footer server component I have an http call like this:
async function getFooterData(): Promise<{id: number}>{ const randomNumber = Math.floor(Math.random() * 100) + 1; const res = await fetch(https://jsonplaceholder.typicode.com/todos/${randomNumber}`, {next: {tags: ['footer']}});
const json = await res.json();
return json as {id: number};
}
const Footer = async () => {
const data = await getFooterData() as {id: number};`

Also as you can notice in my http call I have a revalidation on demand tag which I'll call when on button click (or whataver) and for static pages it works fine, data is cached, than I call revalidateTag() function and page is rerendered.
But for dynamic pages I've noticed that on each page refreshen I'm getting a new data from my api call, not cached data !
So, the question is, how can I cache api calls for revalidation on demand for dynamic pages.
I thought about using api routes but seems like they don't have revalidation on demand functionality (or if they do I'd like also to see an example of doing this).

Thank you for responses in advance.