Initial render to html file

[davidcallanan]

Firstly, this feature could already exist, but after digging for a while I couldn't find it. I asked a question on stackoverflow

Is your feature request related to a problem? Please describe.

Svelte is compiled to both js and css, but not to a html file with the initial render. This means that the initial render has to be performed through JavaScript.

Problems with this:

• Slower load time
• Negative SEO impact
• Potential negative accessibility impact
• Browsers without JavaScript won't see anything, even if the page is mostly static

Describe the solution you'd like

I'd like the ability to also generate a html output which contains the initial render, and contains a link and script tag to the js and css (this could be configurable). In this situation, the initial render code should be removed from the javascript, and all that's left is the dynamic code.

Describe alternatives you've considered

• Creating the static parts of the website inside the index.html file and only using Svelte for the dynamic parts. This would be very difficult to do and prevents me from using Svelte for any of the static parts. The dynamic parts would also still not have an initial html render which still has the issues described above, but at least it's better.
• Switching to another framework such as Next.js or react static or something else. These all have at least one of the following problems which prevents me from using them:
  • Requires a runtime (which Svelte doesn't)
  • When compiled, none of the component-scoped javascript is available at runtime (which means adding hamburger menus, etc, is as difficult as using no framework)

How important is this feature to you?

Possibly important. If my website(s) grow, I don't want to have the issues I described above, but with a small website, it's not the end of the world for now.

And I don't believe this feature would be particularly difficult to implement.

[Conduitry]

Sapper is the official, batteries-included solution for something like this.

The compiler already can produce a server-side rendered version of a component. This is returned as javascript code which can be run to return html. Returning html code directly from the compiler is not practical, as rendering a component is going to involve executing some user-provided code from the component, and we don't want to be executing arbitrary code - the degree of sandboxing should be up to the user.

[davidcallanan]

@Conduitry Thanks for your response.

I can see why the compiler shouldn't execute arbitrary code. I considered executing the js output and snapshotting the html for the initial render. But, I assume, this snapshot cannot be connected to the JavaScript again at runtime because then the page will be re-generated at runtime.

I will have to look again at sapper. It seems to solve my issue but also seems to require a server and I couldn't find a way to generate html files instead.

[davidcallanan]

Ok, so what I was looking for with sapper was the ability to "export": https://sapper.svelte.dev/docs#Exporting This solves my problem.