Writing an SPA with Next? (using AppRouter)

[tomasreimers]

Hi,

I'm trying to write an SPA with Next (Next is great, but full offline is a hard requirement for the project and that's pushing me towards an SPA). It mostly works (I can import React Router for navigation), except when I click "back". When I click back, a popstate event occurs, and because app router doesn't recognize the state, it triggers a full refresh:

https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L544

Is there someway to disable this behavior? Pages router had a hook for this, and I see that AppRouter would disable this behavior if I set __NEXT_WINDOW_HISTORY_SUPPORT to false (https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L470). Is this a stable API? Is there another way to disable this refresh on popstate?

Thanks,
Tomas

[Khalil-Khe1]

When you click 'back', you mean the browser's back right? If that's the case, try implementing your own button for that. Something that keeps track of route history, so you can handle navigation manually. Otherwise, if you still want to mess with the popstate, there's this discussion

[tomasreimers]

This only works with pages router?

[icyJoseph]

Doesn't export mode cover your needs? Or is the PWA aspect (to get offline mode I guess) the roadblock there?

[tomasreimers]

I suppose I could just generate the manifest programmatically? Then my challenge is that I'm missing functionality like dynamic routes on client (although that might get solved): #54393 (comment)

[steida]

SPA with Next.js App Router is currently not possible.

#54393 (comment)

[bestickley]

Hey @tomasreimers, I wanted to ask how your offline support requirement led you to SPA instead of SSR/RSC for App Router. Have you thought about creating a non-SPA app with App Router and then pre-caching all routes upon initial load?

I'm building a PWA where there will be spotty connections and offline support is needed and I am investigating this strategy. Haven't completely tested it out, but I don't see why it couldn't work.

I'm planning on using the Network First caching strategy where updated content is attempted to be fetched and if no network, it serves from cache. Planning on using serwist.

[fuadsaud]

@bestickley is there any documentation on this approach? I have a similar use case and my previous attempts to use the app router didn't work particularly well. Currently evaluating switching to SPA for better offline support.

Additionally if you want to ship your app for full offline use as an Electron or Tauri app, an SPA is necessary.

[bestickley]

@fuadsaud, I don't have any documentation for the approach. Just an idea right now that I'll be testing out. Why did you previous attempts to use the app router not work? Why does a SPA have better offline support?

I do not have to ship my app as an Electron or Tauri app, but good to know.

[joey-ma]

Even though I haven't implemented either approach myself yet, this article from colinhacks seems super helpful, and here's another approach from gaearon.