SSR support

[faburem]

Do you think there is any chance we can get SSR support?
I was researching this topic a bit and it seems that svelte takes a rather special approach here:
https://svelte.technology/guide#server-side-rendering
This doesn't seem to work with Meteor because you cannot overload require at runtime (or at least I was not able to get it working).
Now I understand that the build plugin is providing the compile functionality for all imports (i.e. client and server) and we don't want to overcomplicate how everything works for regular client side imports. Neither can we create a new build plugin because it would process the same extensions and files. However I was wondering if there would be a way to export the {code} generated by the svelte compiler when using generate: 'ssr' along with the default export?
That way you could still do import Example from '/imports/Example.html' on the client and on the server for ssr you could use import {ssr} from '/imports/Example.html'. Another Option could be to extend the svelte class generated by the compiler and add the static .render(data) method from the generate: 'ssr' compile step.
Happy to hear your thoughts on this!

[klaussner]

Thank you for this detailed analysis! I haven't used Svelte with SSR myself yet but it's definitely a feature I would like to have in the build plugin. However, exporting both builds ("dom" and "ssr") probably won't work because components would have to know whether they are imported on the client or on the server. For example:

<!-- Component.html -->

<div>I'm a component!</div>

<!-- App.html -->

<Component />

<script>
// Which of the two `import`s should be used? It depends on where
// `App.html` is imported (client or server).
import Component from "./Component.html";
import { ssr as Component } from "./Component.html";

export default {
  components: {
    Component
  }
};
</script>

I'd also like to avoid adding the "ssr" component's render function to the generated class because it would add code to the JavaScript bundle that is never used on the client.

Maybe we can use the same approach as Meteor's babel-compiler package and detect for which architecture (client or server) a file is compiled. If it's compiled for the server, we generate an "ssr" component. This would be similar to Svelte's require("svelte/ssr/register"), except that components are generated at build time rather than at runtime. And it wouldn't require any configuration.

What do you think? 🙂

[faburem]

+1 on avoiding useless code on the client, I have not thought about that part.

Maybe we can use the same approach as Meteor's babel-compiler package and detect for which architecture (client or server) a file is compiled.

I did not know that this is possible with a build plugin, this would definitely be the best approach!
Please let me know if there is anything I could help with (i.e. testing), I am starting a new project and I will use meteor-svelte for the UI layer.

[klaussner]

Great, thanks! I will try to get a testable version ready sometime this week.

[klaussner]

Released in version 1.64.1_1! 🙂