Why the fetch request is not Caching the data?

[unknownZeyad]

Problem with Revalidation and Fresh Data in Next.js Server Component

I'm working on a Next.js server component where I need two things:

• Fetched data: Cached and revalidated every 5 seconds.
• Math.random(): Fresh on every page load, regardless of caching.

However, I’m finding that either everything refreshes each time (losing caching), or everything caches together, including Math.random(). I've tried using { next: { revalidate: 5 } } and dynamic = "force-dynamic", but I can't seem to achieve both. Any ideas on how to split caching behavior for fetch and other dynamic values within the same server component?

export const dynamic = "force-dynamic";

async function Page() {
    const res = await fetch("http://www.randomnumberapi.com/api/v1.0/random?min=100&max=1000", { next: { revalidate: 5 } });
    const data = await res.json();

    return (
        <div>
            <p>Random number from fetch is: {data[0]}</p>
            <p>Random number: {Math.random()}</p>
        </div>
    );
}


export default Page