Question: How to do SPA for one page?

[osseonews]

I was reviewing the docs for SSR and SPA (https://vike.dev/render-modes) and I don't quite understand them.

In our particular use case (described a bit more below), we want the entire website to be SSR, with the exception of only 2 pages, where we need an SPA. In reading, the docs, and looking at the example (examples/render-modes/renderer) it seems like if we want to do this, we need to specifically mark every single page as either SSR or SPA, by including a +renderMode.js for every page. As all the pages, except for 2 are SSR, this is kind of a big pain. Is there anyway to just have the basic set up and only mark certain pages as an SPA, but then everything else just runs as SSR?

By the way, our use case is that we implementing Clerk as an authentication scheme for our project. We got it working, but to use Clerk React components for SignIn and SignOut, you need an SPA for those routes, otherwise, you wind up with tons of page rerenderings, which causes some strange bugs. In case, anyone is interested in the documentation is here: https://clerk.com/docs/quickstarts/react (this is for Vite, but requires some changes to work with Vike), and here are the components: https://clerk.com/docs/components/authentication/sign-in The whole beauty of Clerk is that if you use their built in components, this is the easiest Auth to set up by far. It's just cut/paste. But, with Vike the components are challenging per above.

[phonzammi]

it seems like if we want to do this, we need to specifically mark every single page as either SSR or SPA, by including a +renderMode.js for every page.

What if you put +renderMode.js only for that 2 pages?

[osseonews]

Well, yeah, that's my question. Is that the way to do it? Because the examples don't do that that way and seem to imply that once you decide on SPA, you need to specifically say what each route is for, SPA or SSR.

[phonzammi]

Well, for short answer (I'm sorry) you can try it from the example, try remove one +renderMode which has SSR.

[brillout]

@osseonews vike-{react,vue,solid} implement ssr: boolean which seems to be exactly what you want.

[osseonews]

I guess this is the example to use? https://github.com/vikejs/vike-react/tree/main/examples/ssr-spa

[brillout]

Yes