Better SSR

[PaulBGD]

So some of the issues I have with the current SSR implementation are:

• Adding a require to Node
• I can't use my existing bundle
• All features in the client app have to be supported by the server app

I decided to try my luck at quickly creating an implementation that solves these issues.
To reuse the existing bundle without creating a new compiler, I tried to replicate the DOM functions which is a bit hacky, but works very well and fast.

I created a repo for this, I'd like to know your thoughts: https://github.com/PaulBGD/svelte-better-ssr

[Swatinem]

Have you tried the new compiler option to output ssr code? https://github.com/sveltejs/svelte/blob/master/src/index.js#L29-L31 Admittedly, its completely undocument so far. But that way svelte outputs SSR code that you can then bundle up and use, without the need for a require-hook.

[PaulBGD]

Does that work with rollup/webpack? If so maybe that could work.

[PaulBGD]

@Swatinem I've looked into it and I think it only solves the requires. One of the big advantages from React/Vue is that you can take the example same bundle then render it on the server.

[Swatinem]

The point of svelte is that it generates the absolute minimal code. While I would love to include both dom rendering, string rendering (SSR) and hidration code in one bundle, I think for now its not feasible.

[PaulBGD]

Then don't use one bundle, but at the moment we can't bundle server side code at all.

[Rich-Harris]

Just been playing around with this locally to see what would be involved in getting this to work. Basically,

• we need build tool integrations like rollup-plugin-svelte to expose options.generate, and
• the SSR compiler needs to emit ES modules, not just CJS

Both are totally doable and desirable.

All features in the client app have to be supported by the server app

I don't think that's a problem that can be fixed at a framework level, only at an app level. You'd need to configure your bundler to use different server/client versions of specific components, or leave a hole in the component tree that only gets filled in in the browser, or something.

[Rich-Harris]

We can now generate SSR bundles with rollup-plugin-svelte: https://github.com/Rich-Harris/svelte-ssr-bundle

It's not perfect – no hydration, and we don't have a good routing story yet – but it works. It's similar to what we're currently doing at the Guardian (though that was using svelte/ssr/register during the build)

[PaulBGD]

That looks really great, solves most of my issues.

[PaulBGD]

I finally got a chance to try SSR rendering + rollup and it works amazingly! I'm going to close this issue because I believe all my original issues are solved.