Improve SEO and initial load

[arctic-hen7]

This is a big change to the existing initial render model, and one that I've wanted to make for a while.

Presently, on first load, the user is sent a generic HTML file, no matter what page they asked for, which includes the app shell, which then fetches the appropriate content. However, this means two round trips to load the first page, and then the app shell smoothly takes over from there. This also means that any crawlers that don't execute Wasm won't get anything except a blank screen, which is atrocious SEO.

The solution I propose is instead performing the app shell process on the server for the first time a user requests a page, then rendering the page as normal on the server and injecting it into that generic HTML file. That way, the user will always be served a complete page on first render, and then the app shell takes over.

I should clarify that this problem only applies to the first render. All further navigations are handled internally by the app shell, which makes things much smoother, almost like an SPA (but much better on the server).

This approach is also friendlier to a future exporting system, because this process could be performed for every page in an export stage, and thus a fully static site could be created, eliminating the need for the server for projects that don't need more complex request-time strategies.

[lukechu10]

There should also be a pure spa mode for those where SEO is not as important or who just like the simplicity of SPA. When creating an isomorphic app, sometimes we need to write client or server specific code which won't be necessary with a SPA.

[arctic-hen7]

Could you give me an example of a situation in which that would be particularly useful?

[lukechu10]

For example for sending HTTP requests, we only have to worry about client side, not server side. Of course, we could do this on the server-side and serialize it during the page load but that wouldn't work for something like, say, using firebase for realtime data.

[arctic-hen7]

Couldn't that just be done in the existing system inside a component with a check for the definition of the window using web_sys?

[lukechu10]

Sure, we could use conditional compilation but that makes everything more clumsy. SvelteKit has an option for this (even though it is generally not recommended) https://kit.svelte.dev/docs#ssr-and-javascript-ssr

[arctic-hen7]

Hmm okay. Maybe open a separate issue for that then.