Are client-side instant navigations possible in NextJS 15?

[iampava]

Summary

I just updated an app from NextJS 14 -> 15 and noticed that every time we navigate through the app, a new ?rsc call is being made.

This even happens when navigating to sub-pages of the same layout (imagine a layout with tabs and children pages underneath).

Screen.Recording.2025-03-23.at.12.40.54.mov

I tracked this behavior to this update: https://nextjs.org/blog/next-15#client-router-cache-no-longer-caches-page-components-by-default

For the type of app we're building this is quite a big annoyance. We want the app to be super snappy and fast when moving around, but now you have all those delays.

My question is: Is it possible to have instant SPA-like navigations?

I saw they mention the staleTimes config in that blog post, but on it's own individual page I see:

This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.

How is everyone getting around this problem?

Additional information

No response

Example

No response

[imrashidov]

Try adding dynamic = 'force-static' to your layout to see if it helps prevent the re-fetching on every navigation

[iampava]

I can't really do this, I have dynamic data.

[SidKH]

My question is: Is it possible to have instant SPA-like navigations?

Yes, but how to implement it depends on the type of app you are building and your goals.

Pages that don't rely on dynamic data fetched in server components can be pre-built statically and will get prefetched by the Link component so the navigation is instant.

For pages that do fetch dynamic data in server components, you can add loading.tsx. The fallback from loading.tsx will get prefetched by the Link component so that the navigation to the fallback will be instant, and then the actual data will stream in.

Additionally, you can set prefetch={true} for certain links to prefetch the entire route (not just loading.tsx part)

https://nextjs.org/docs/app/api-reference/components/link#prefetch

[iampava]

For pages that do fetch dynamic data in server components, you can add loading.tsx. The fallback from loading.tsx will get prefetched by the Link component so that the navigation to the fallback will be instant, and then the actual data will stream in.

I am looking for an SPA like result on subsequent visits to a page I have been to. Specifically I would like to achieve this flow

1. Open browser
2. Navigate to a page in the app
3. Page is SSR, wait a bit then it renders
4. Navigate to another page -> takes a bit as it's also fetching data in RSC , and rendering
5. Navigate back to initial page
6. Instant navigation that shows previous data (that I already have in React Query cache)
7. If data changed it will be updated via RQ cache mechanism

Is this a pattern that next supports. I can only see supporting this if I enable staleTimes, that basically caches RSC results, which is what I need for step 6.

[SidKH]

Do you pre-fetch in RSC and pass it to RQ as initial data?

In this case, staleTimes should help indeed.
As for it's stability, I'd assume the official suggestion on how to opt-in into the previous behavior from the blog you shared can attest to it https://nextjs.org/blog/next-15#client-router-cache-no-longer-caches-page-components-by-default. Just keep an eye on future updates in case some options gets renamed.

Alternatively you might try something like RSC streaming with RQ (Next can initiate fetch on the server and pass it to the client without blocking the response). https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

However, I haven't tried RQ version of this yet and it might be too much additional work for your use case

[iampava]

Do you pre-fetch in RSC and pass it to RQ as initial data?

Yes, exactly.

In this case, staleTimes should help indeed.
As for it's stability, I'd assume the official suggestion on how to opt-in into the previous behavior from the blog you shared can attest to it https://nextjs.org/blog/next-15#client-router-cache-no-longer-caches-page-components-by-default. Just keep an eye on future updates in case some options gets renamed.

I think so as well, but I still a bit weird it's experimental. I mean for me this was the biggest pro of using Next vs Vite, having SSR initially and then SPA-like afterwards.

Alternatively you might try something like RSC streaming with RQ (Next can initiate fetch on the server and pass it to the client without blocking the response). https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

However, I haven't tried RQ version of this yet and it might be too much additional work for your use case

Yeah, seems too complex...

Thanks for the input!

[mfrachet]

Curious about this "instant nav feeling". Since there's at least one RSC payload roundtrip (for loading the next page) that is not cache because of dynamic content, there will always be a very short moment where the suspense boundary would show no? Except if you prefech every thing on the page which is probably not what I want

[Zerebokep]

It was possible in next js 15.1 using staleTimes, but 15.2 broke it.

[devajakamerus]

Pretty sure in many cases it would make more sense to bundle the pages and load them at once. Excessive amount of small requests is both a waste and possibly a cost factor as well. Same thing with prefetching.