Aurelia: Isomorphic?

Question

As far as I know, Aurelia does not support server-side rendering, as mentioned here .

But the question is: can this be done with some hacks / workarounds?

The most obvious idea would be to use Phantom, Nightmare.js or something else to just display this page in Chrome on the server and serve it to the client, but this is likely to cause big performance problems.

Thanks!

UPD

In accordance with Rob Eisenberg’s response to FDConf today (April 16, 2016), server-side rendering will be implemented in 2016, one core team member will work there, and there will be a deadline for this function.

Answer 1

There is an open problem for Universal / Isomorphic Aurelia that you can control. In particular, EisenbergEffect (who is Rob Eisenberg, creator of Aurelia) claims that they are gradually working to provide universal support for Aurelia. This post from him contains most of the details:

EisenbergEffect commented on August 25th

We are trying to block the situation over the next month. We won’t add anything after that, but we need to work towards stabilization, performance and reliable documentation without distracting a lot of new features for a bit.

First of all, "isomorphism" is not a precedent that we want to solve for the initial release of v1. Again, this does not mean that we will not do this later. But we want to have a solid foundation for browser-based applications. like phone clearances and electronic / nwjs desktop applications. This is our initial goal, and we want us to deal with these scenarios better than any other structure or library.

After that, we have some other functions that we want to do, which are valuable in themselves, but also bring us closer to isomorphism.

• Enable all aurelia libraries to run on the server. This allows new testing scenarios, so they are valuable, if only from this point of view.
• As soon as the code can run on the server, we can implement the server view compilation. This is not an isomorphic rendering, but rather the ability to process the View Aurelia compiler as part of your assembly and package. This allows you to do more work in advance, as part of your build, and then you don’t need to do this in your browser at runtime. Thus, this will improve startup time for all applications and reduce the initial rendering time for all components. It will also make it possible to save compiled views in the local browser cache in order to improve the performance of sequential runs of the application.
• After both of these are in place, then we can look at how to fully render the server for each route. This is not completely isomorphic in the literal sense, but it solves the SEO problem without requiring third-party libraries. So, it's nice to have a solution there.
• Finally, we can “synchronize” the server with pre-rendering using the Aurelia state-enabled browser application, giving us 100% isomorphic support. So these are the steps. The first two will be useful to all developers, even those who are not interested in isomorphic applications. The third stage can be done today with third-party libraries, so it's nice to have for us, for those who do not want additional dependency. All this leads to the fact that adds the final fragments.

We have already begun some of the work on 1. This may be in our first release. We are not going to push him, but this is already progress, and we are looking for problem areas so that we can do this. Steps 2-4 include significant work. Indeed, we are talking about a set of functions here, each of which is quite complex. So, they are likely to be phased after v1, like point releases.

We really do not want to do what Angular 2 did. They have significantly complicated their architecture ... to the point that very few people can figure it out and develop applications with it has become much more complicated, with many nuances. We really don’t want this, so we focus on the experience of the developer, which we want first, then we will go back and look at isomorphic support (yes, we already have ideas on how to do this cleanly, but I want to give these ideas some time to mature). In all this, our goal is to be modular. So, if you do not care about isomorphism, you do not need to think or worry about it. If you do this, you must install the necessary packages, accept the "limitations" of the system and be on your way.

So, for anyone interested in this topic, I will just ask you to kindly be patient. For those who are not interested in isomorphism, do not worry, we are not going to slow down the experience of developers on you. For those of you who want this badly, you will have to wait longer and it will take place in stages and in modular parts so as not to disturb others.

Answer 2

For now

The only way to suggest: render pages using phantomjs + use redis to speed up this process.

But you will have many problems with client side state recovery.

.......

Dirty decision

Downloading the displayed page from the server and on the client side does a new normal way than the switching user interface.

It will not be really isomorphic, but something like https://github.com/rails/turbolinks when loading the first page.

.....

I hope that the Aurelia team will soon provide more simple material for this case.

Answer 3

The current Aurelia has the opportunity to improve the existing html. The document says:

So far, you've seen how Aurelia replaces part of the DOM with the root component. However, this is not the only way to do with Aurelia. Aurelia can also gradually improve existing HTML.

Check the improvement section @ http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.8/doc/article/app-configuration-and-startup

I look forward to getting better documentation on this feature. It seems to me that rendering html on the server and implementing aurelia will work with it, and google will also like it.

Answer 4

hacked, I just came up with a static copy of the original rendering in the index.html file:

<html> <body aurelia-app="main"> <h1>static copy of the website here</h1> <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script> </body> </html> 

this is, of course, completely manual, and if the initial rendering contains any content from the database, then a static copy may need to be updated every time the contents of the database change. (which, of course, should solve the isomorphic rendering)

however, for my needs, which is a simple website with some information that is rarely updated, this solution is good enough. this will be, at least, sufficient until I can implement the correct isomorphic rendering.