SSR: Aurelia vs SvelteKit

Framework Knowledge
1

I’m doing a deep dive into other framework just to compare them with Aurelia. I’m interested in SSR.

The current framework is Svelte+SvelteKit. My knowledge is very limited, so I might get something wrong below. I’ll correct as I review the framework.

I have to say, I’m not a fan of how Svelte/SvelteKit requires special file and directory names. It also has poor route interception, for such things as protected routes. Also, the whole layout thing is just weird.

SvelteKit seems to take a unique approach with initial data loading.

First, if you have a path/directory with a +layout.svelte file, it will use that as the common wrapped layout for all child pages. Pages starting with a + have special meaning here. It knows that +layout is a wrapped page, and +page is the component page.

layout.svelte (note, slot is going away in Svelte 5 for a more convoluted syntax):

<nav>
	<a href="/">home</a>
	<a href="/blog">blog</a>
</nav>

<slot />

page.svelte:

<script>
	export let data;
</script>

<h1>blog</h1>

<ul>
	{#each data.summaries as { slug, title }}
		<li><a href="/blog/{slug}">{title}</a></li>
	{/each}
</ul>

In addition, for data loading you can have +layout.server.js/ts, +layout.js/, +page.server.js/ts, and +page.js/ts. They hold the code to load initial data, and each will cascade it’s return data to the next, in a data flow hierarchy.

+layout.server.js/ts > +layout.js/ > +page.server.js/ts > +page.js/ts

So, if a *.server.js file exists, that will run on the server only, and then the universal *.js will run:

+layout.server.js:

export function load() {
	return {
		a: 1
	};
}

Returns:

{
  a: 1
}

+layout.js:

export function load({ data }) {
	return {
               ...data,
		b: 2
	};
}

Returns:

{
  a: 1,
  b: 2
}

+page.server.js:

export function load({ data }) {
	return {
               ...data,
		c: 3
	};
}

Returns:

{
  a: 1,
  b: 2,
  c: 3
}

+page.js:

export function load({ data }) {
	return {
               ...data,
		d: 4
	};
}

Returns:

{
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

I just don’t get this. I can understand chaining client-side only, and server-side only together, but not both? If you want the video, even SPA navigation will still run the *.server.ts endpoints.

I do like how the data loading is broken out, but I would prefer the option have the server code only run for SSR actions, and injected into the data loading flow when loading as a result of a SPA navigation.

That are your thoughts? How could you see Aurelia offer similar functionality, but also code that is strictly only run in SPA or SSR mode. A use case I’m thinking of is when loading data via SSR, I might want to load the data directly from y Kubernetes cluster service, where as SPA loading would make use of the public API URL. Having the ability to break that out would be nice, and isolate each so that the SSR loading isn’t run as a precursor to loading the SPA loading.