Revalidated static route doesn’t show loading.tsx

[mnty4]

Summary

I have a route like:

export default async function PromptListPage() {
  const prompts: PromptListItem[] = await fetchPromptsFromDB();
  return (
    <main>
      ...
      <div>
        <PromptList prompts={prompts} />
      </div>
    </main>
  );
}

I also have a loading.tsx under the same sub-directory. when I create a new prompt I call revalidatePath("/prompts/list"). The issue is when transitioning back to the /prompts/list route it doesn't show the loading.tsx skeleton and just hangs until the data is re-fetched.

This issue only occurs when I use a static route, a dynamic route correctly shows loading.tsx. The issue is that a dynamic route will re-fetch the data every time I transition to it, but I shouldn't need to do this until I explicitly invalidate the route. Any help is appreciated.

Additional information

No response

Example

No response

[haroonmaqbool]

This happens because static routes don’t re-trigger the loading.tsx during revalidation the page is served instantly from cache until regeneration finishes. Dynamic routes re-fetch on navigation, which is why you see the loading state there. If you want the loading.tsx to appear after revalidatePath(), you can mark that route as dynamic = 'force-dynamic' or set revalidate = 0 so it re-renders on navigation instead of serving the cached version. It’s a tradeoff between showing the loading state and keeping it static.

[mnty4]

Alright, but I don’t get served the page instantly from cache on navigation. Instead it hangs for a few seconds until data is fetched and then navigates to page.

[haroonmaqbool]

That delay happens because when a static route is revalidated the cache entry is marked stale, so the next navigation waits for the new payload to be fetched before rendering. You’re basically seeing the re-fetch delay without the loading.tsx fallback. If you want to avoid that blank gap, you can manually trigger a transition state by calling router.refresh() after creating the new prompt, or use revalidateTag instead of revalidatePath so the data layer updates instantly without blocking navigation. That way the page stays static but still refreshes smoothly.

[mnty4]

I don't want to manually trigger the transition state. I believe revalidateTag requires a client component, no? I think the force-dynamic route will work for me, I just wonder why it doesn't cache the stale version until the revalidated version is retrieved :/. Thank you for the help, much appreciated.

[DanielSalazarLoaiza]

This happens because static routes are pre-rendered and cached, so loading.tsx only appears during client-side transitions when data fetching is pending.

In your case, after calling revalidatePath("/prompts/list"), the new static asset is generated in the background, and the router doesn’t trigger a suspense boundary — hence no loading.tsx appears.

To fix it, you can:

• Use a dynamic fetch (fetch(..., { cache: 'no-store' })) or export const dynamic = 'force-dynamic' to ensure a proper loading boundary.

• Alternatively, wrap your list component in a <Suspense> boundary manually to force the skeleton render during revalidation transitions.

Static routes don’t automatically re-trigger loading.tsx after revalidatePath, since the cache update happens server-side, not via a client navigation event.

[mnty4]

force dynamic will result in re-fetching the content on every transition, I wonder if there is a way to mark it to be cached client side and serve stale version until it retrieves revalidated version, like swr but that only works for client components :/. I might just end up going the force-dynamic route. Thank you for the help though.