SSR / SSG in SvelteKit for nested resources

[joepio]

We can use SvelteKit's load functions to wait for responses on a page, but not for a nested component. E.g. on a home page, the title will SSR just fine, but the articles will not be loaded yet.

The useResource hook returns undefined when the Resource hasn't been loaded yet. As a developer, you can use this to create loading states. However, SvelteKit doesn't seem to know that the page isn't done rendering.

So we need some way to do true static site generation / server side rendering for nested resources. I'm not entirely sure how, and I'm kind of a noob with Svelte(Kit), so here goes nothing:

Use svelte await blocks

https://svelte.dev/tutorial/await-blocks

I kind of assume these are implemented in SvelteKit in such a way that SSR / SSG waits until they render the non-loading state.

Load function that fetches N level nested resources

Instead of fetching just the requested page, also fetch it's relationships (e.g. fetch the author of a Post, fetch the articleList of a Blog).

Top level await

sveltejs/svelte#5501

Add a load function to these components

I'm not entirely sure if load functions are a thing for non-route components... But maybe they are.