Support for SPA Mode

[plunkettscott]

Would supporting SvelteKit's adapter-static SPA mode be something you are willing to do? Currently the runtime does not work, expecting things like document.initialValue to be set but is not because there is no SSR hydration.

Quite a few people, myself included, embed the static assets into binaries we ship as part of the release process because we use languages that do not support SSR. In my case, that's embedding the assets in a Go application and serving them with an embedded file server.

Original SPA mode PR: sveltejs/kit#1181

[AlecAivazis]

Yea that definitely seems like the kind of thing houdini should support. Unforunately, im not too familiar with the details of various adapters yet - any idea how we would be able to determine if we are running in spa mode? Now that the config file is a full on javascript file, we could always rely on a environment-based toggle if we have to 🤔

I'm currently working on a branch for #72 and #67 which i think would handle the actual details for this as well - ill keep you up to date

[plunkettscott]

Thanks Alec! Trying to get a feel for the code base so that I can help out on some of these issues. Hoping I can get myself up-to-speed soon.

---

Edit: Sent the comment too soon.

As for determining the adapter type, I'm thinking a better approach may be to add logic into the runtime to determine if there was SSR hydration and if not initialize empty values and leave the load logic in place. I feel like coupling logic to specific adapters may be too brittle--there's nothing to prevent someone from running a custom adapter for their deployment environment that may look different but ultimately produce the same result.

For the most part, a lot of this is already taken care of by SvelteKit's load method which does work in SPA mode. I think the hurdle is just making sure that houdini's specific methods are wrapped in some sort of SSR/Non-SSR logic.

[AlecAivazis]

I absolutely agree that we want to avoid coupling to a particular adapter. The query-outside-route branch is taking a very similar approach to what you describe - if query encounters an undefined initial value for the query it loads it on mount (so that bare svelte apps and non route/layout components can get their data) however i'm not sure how to determine if kit will handle it or not. I'd like to avoid the extra network request if possible.

[plunkettscott]

Yeah, I can't think of a universal way to know that any framework (Sapper, SvelteKit) would handle the loading to avoid the network request.

I think there could be some automatic selection to be had from knowing the mode and then potentially reading the config file for the framework (for example, svelte.config.js has an ssr property in SvelteKit), but it makes assumptions about the configuration and I don't think that it's safe to be making those assumptions, especially with SvelteKit not yet at v1.

There's also the case where in SvelteKit someone can disable ssr on a specific page. I can't imagine a use case where you'd disable SSR for a single page and also be using houdini, but I'm sure someone will try it.

I think the only real way to know if SSR is happening by default is is to rely on an ssr configuration option in the houdini.config.js file. This would be an always-on or always off option. If Automatic Persisted Queries were implemented in the Environment (and the server supports them), the additional network requests could be less expensive.

[AlecAivazis]

@plunkettscott - i think i have a working update to support the SPA mode. You'll have to add some logic in the config file to set the framework field to svelte when you are building the app in SPA mode but i think that's probably a necessary evil until we can figure out how to automatically detect it.

Mind testing out #95 and see if it works for you?

[AlecAivazis]

With the release of 0.8.0, I had to change the way that spa mode is handled. Now you have to keep framework set to kit, but set the static config value to true.