Description
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
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.