Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better SSR #196

Closed
PaulBGD opened this issue Dec 14, 2016 · 9 comments
Closed

Better SSR #196

PaulBGD opened this issue Dec 14, 2016 · 9 comments

Comments

@PaulBGD
Copy link
Member

PaulBGD commented Dec 14, 2016

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
Copy link
Member

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
Copy link
Member Author

PaulBGD commented Dec 14, 2016

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

@PaulBGD
Copy link
Member Author

PaulBGD commented Dec 15, 2016

@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
Copy link
Member

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
Copy link
Member Author

PaulBGD commented Dec 15, 2016

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

@Rich-Harris
Copy link
Member

Rich-Harris commented Dec 15, 2016

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
Copy link
Member

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
Copy link
Member Author

PaulBGD commented Dec 17, 2016

That looks really great, solves most of my issues.

@PaulBGD
Copy link
Member Author

PaulBGD commented Dec 30, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants