Making Remix SSR app as Remix SPA

[chrome thorn]

• One of the clients we're working for needs a mobile like app so We went with pwa and chose remix because it's built on top of web standards. So far we had no issues but the app client showed for reference is a native app and it doesn't reload for every navigation and navigates instantaneously.
• So we also tested something with remix, which is Faster for navigation like native app but it reloads every navigation (route).
• someone told us to try react + react router and it was very good and the app was slick, but rewriting at this point is not possible.
• so I got an example repo and came to know that there is a remix spa mode,
  https://github.com/alexrusin/remix-vite-spa
• I tried it and it's exactly what we want our app to be, because it needs to feel like an native app for client.
  Questions:
• if we want our app to be like remix spa, what should we change, should we do an entire rewrite? Our app already is in working condition and already integrated with supabase?
• if we do that as Remix SPA, will we miss out what remix offers?
• what are some approaches to this situation?

[normal cosmos]

Could you simply set prefetch="render" on all links to aggressively prefetch data for all linked pages? Then transitions would be instant and you don't need to make large changes. Downside is more server load.

https://remix.run/docs/en/main/components/link#prefetch

[chrome thorn]

Any other options?

Like this managing loaders and actions on server and spa?

[normal cosmos]

It seems like you want the page to transition immediately even if data isn't ready and show a skelton loader or spinner. You can achieve that by using link prefetch to ensure the route bundles are prefetched along with returning a promise from the server (some transition delay) or doing all fetching in clientLoader and also returning promises.

https://reactrouter.com/dev/how-to/suspense

Depending on your app, you could also try prerender pages and then aggresively cache them in your pwa.