Server-side Rendering

vNext
1

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
2

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

3

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

1 Like
4

Yes it is :slight_smile:

1 Like
5

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
6

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

1 Like
7

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
8

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
9

I’m pretty exited about Aurelia 2 and love the documentation at docs.aurelia.io. Unfortunately, it lacks any info about server-side rendering. After searching high and low I found this thread and it does not render me too confident. If I understand this correctly, SSR does not exist yet and probably will not for a long time if ever at all (judging by the general visible progress of Aurelia 2). Is this a fair assessment?