Request: an adapter between static and nodejs

[kainsavage]

Describe the solution you'd like
I have been playing with the static adapter and find it great for simple sites (like my blog), but I think there is a need for an adapter that provides complete client-side (read: no SSR at all) SvelteKit applications while supporting actual Svelte functionality. For example, the documentation says:

In other words, any app that involves user sessions or authentication is not a candidate for adapter-static, even if individual pages within and app are suitable for prerendering.

I think that this is because adapter-static is essentially running in SSR during dev, and builds the static html/css/js at build time. What would be great is if that same process were taken in a new adapter, but instead of treating SSR as the builder for static html/css/js, it would build an empty-bodied index.html which includes the Svelte bundle so that each route is its own contained Svelte application. This would essentially take the SvelteKit approach of routes and pages, but also support pages rendering differently based on authentication, for example.

Svelte application bundles appear to be pretty small after processing - the basic Svelte application has a 3kb bundle, and a fully built client SPA I am working on has ~4MB bundle size (which, I assume would be broken out into several smaller bundles on a per-page basis given the implementation I am suggesting). Additionally, all the niceties that adapter-static gives would still hold true since the adapter would be building individual pages and not an SPA (analytics, seo, etc).

How important is this feature to you?
I really like the idea behind SvelteKit, but have wanted to avoid both SPA and SSR given my experience with both. I would really like the client-side application to sit on its own and reap all the awesome features that Svelte has to offer. That said, I think this solution (or one with similar goals) is very important to me.

[dummdidumm]

I'm not sure I understand. You don't want to prerender and instead have the code initialized client side, which sounds like SPA to me, but at the same time you don't want a SPA.
Side note: adapter-static can also be used for SPAs now, see its readme.

[kainsavage]

You are correct in that I do not want an SPA. I would rather have something akin to what adapter-static provides but with true client-side Svelte support.

For example, adapter-static transforms routes/* into index.html pages which are prerendered. What I am asking for is a similar approach but without prerendering each of those index.html pages and instead considering each page as its own Svelte application and bundle.

I have kind of mocked this out by running npx degit sveltejs/template and creating a sub-directory with another npx degit sveltejs/template. Then, I modified the rollup config to build the initial Svelte app (the root index.html) but then also create that subdirectory in the output with its own index.html which is, for all intents and purposes, its own standalone Svelte application.

In this way, it would not be an SPA, but several Svelte "apps" which make up the build directory structure, but support non-static Svelte stuff like conditionally rendering based on user session etc.

[benmccann]

What's your motivation for wanting to avoid SPA? It sounds like you used an implementation in another framework that was broken, but in that case I would just say we should make sure SvelteKit's works

You might also consider turning off client-side routing, which perhaps sounds more inline with what you're looking for

[kainsavage]

SPA implementations impose some restrictions that necessitate additional infrastructure that I would like to avoid. For instance, in an SPA one cannot modify head blocks without the client invoking JavaScript, so open graph meta tags consumed by Twitter/Facebook/etc cannot be view-specific without either SSR or something like Lambda@Edge injection.

[benmccann]

What I've seen other people doing in your case is using adapter-static and then putting any info needing to be rendered after authentication inside onMount

[kainsavage]

What I've seen other people doing in your case is using adapter-static and then putting any info needing to be rendered after authentication inside onMount

I have never been as thoroughly shut down in a request as I have in a single sentence. This is exactly what I want, and it appears to work in my testing. Thanks for the help!

[benmccann]

I'm trying to make that at least a little bit clearer in the docs here: #1525

[kainsavage]

Actually, this isn't exactly what I want because I still don't get any Svelte-isms in the runtime. For instance, I cannot conditionally render components based on a reactive variable that gets set onMount.

This is like, it gets you access to client-side scripting, but not client-side Svelte.

Simple example:

<script>
    import {onMount} from "svelte";
    $: test = false;

    onMount(() => {
        test = localStorage.getItem("test");
    });

    function toggle() {
        const foo = JSON.parse(localStorage.getItem("test"));
        localStorage.setItem("test", JSON.stringify(!foo));
    }
</script>

<button on:click={toggle}>Toggle</button>
{#if test}
  <div>TEST!</div>
{/if}

I think this illustrates what this request is about - I love what adapter-static builds, but I really would like this above test to work after it builds the raw index.html pages. It could include the Svelte bundle and support the above example in a static-but-Svelte-app way.

[GrygrFlzr]

Did you mean to do this?

<script>
	import { onMount } from 'svelte';
	let test = false;

	onMount(() => {
		test = JSON.parse(localStorage.getItem('test'));
	});

	function toggle() {
		test = !test;
		localStorage.setItem('test', JSON.stringify(test));
	}

</script>

<button on:click={toggle}>Toggle</button>
{#if test}
	<div>TEST!</div>
{/if}

Because that works perfectly fine with adapter-static with zero configuration. Your example works as coded too, but since test = localStorage.getItem("test"); instead of test = JSON.parse(localStorage.getItem("test"));, test will always be a string evaluating to 'true' or 'false', which is always truthy for the purposes of the if block.

[kainsavage]

I was... I'm still just being bad. Thanks for the pointers!