Server-side Rendering

Continuing the discussion from ISO: Moon Shots:

I got the initial state rendering kinda working ish.
But I can’t find anything on progressive enhancement in vNext: https://github.com/aurelia/aurelia/search?q=enhance

Am I looking in the wrong place?

1 Like

No you did not, if you meant to ask about V2. It’s a high level API that we can add when all the primitives are in place. I’ll ping @fkleuver and @EisenbergEffect for this

Yes. I am consciously talking about Aurelia 2 (that’s the final name isn’t it?)

1 Like

Yes it is :slight_smile:

1 Like

Is there a way to follow the progress of SSR in vNext development more closely than the discourse? Once there is an early version of it ready, I would like to test it :slight_smile:

1 Like

https://github.com/aurelia/aurelia/issues/676 maybe? @fkleuver?

1 Like

I’m halting my efforts due to:

  1. I heard that we are redoing router, and it’s a fundamental piece needs to be stable before I can continue. (Unless I can rely on some basic API not going to change, then I can continue a little bit here.)
  2. As described a few posts above, the lack of progressive enhancement makes SSR kind of a waste.
1 Like

The more I look at this, the more “enhancing” seems like a misleading word.
What we are looking for here is not just “enhance” (basically attach listeners) but rather “hydrate”, which includes updating the DOM if data / dependencies have changed.

Svelte does it in a rather peculiar way:

  • When you build a component, you specify that you want it to be hydratable.
  • Svelte will “document” all the changes it need to make along the way of building that component and rendering its DOM.
  • Later, when asked to hydrate the component, the document will be used as a guideline of what to do.

The way I say it’s “peculiar” is because Svelte is a compiler, it gets to do things like:

// while building the component
make-an-idempotent-change(this.props)
this.chunks.hydrate.push("make-an-idempotent-change(this.props)")

make-another-change(this.props)
this.chunks.hydrate.push("clean-up-as-needed() && make-another-change(this.props)")

this.hydrate = "function hydrate() {" + this.chunks.hydrate.join("\n") + "}";

// later when asked to hydrate
eval(this.hydrate)

Of course the explanation above is an oversimplified naive stripped-down version of what Svelte does, but you get the idea.

React and Vue hydration are more “common” and they work almost like Aurelia v1 .enhance() although they also “repair” the DOM as needed.

That’s what we need here.

1 Like