Production-Ready ISR in Next.js 15: Serving Fresh Data with a Loading State

[left patio]

I'm learning about Next.js 15 rendering strategies and need a production-ready solution. I want to use ISR (next: { revalidate }) to fetch data from a third-party API every 5 minutes and show users data that is at most 5 minutes old. Instead of serving stale content during regeneration, I’d prefer users to see a loading state until the fresh data is available. How can I achieve this in a Next.js 15 App Router setup?

[fringe ice]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[finite stream]

Can't do that with ISR, its not what ISR is designed for. If you need it to be precisely 5 minutes then you'd have to leverage dynamically rendering the page and use the Data Cache function which is either "use cache" in Next.15 or unstable_cache in pre Next15 and switching to non Data cache if the previous data has passed 5 minutes while also revlidating the data cache in the background.

[left patio]

Do you think it is safe to use "use cache" in a prod ready app?