I have a Next.js 14.2.2 application (using the App Router) with a page that displays data from an external data source (let’s say a JSON API Endpoint). That data periodically updates in the external source.

The page is statically rendered on the server and cached by default.
I added a small API route to my Next.js application which I can use to revalidate that page manually:

import { revalidatePath } from 'next/cache';

...ENDPOINT LOGIC...

revalidatePath('/page-that-needs-revalidation');

...

Whenever I update the data in the external data source, I call that small endpoint and the page is marked for revalidation – so far so good.

But now, when I open the page right after manual revalidation, the request results in a cache MISS and the page is only now actually re-rendered on the server.

This results in a slower response time for that first request to the page right after revalidation. Every subsequent request is a fast cache HIT again.

Question:
Is it possible to let that revalidation happen in the background without the user noticing anything (following the stale-while-revalidate pattern)?