June 25th, 2016

What modern client-side JavaScript frameworks are capable of dealing with pre-rendered HTML?

Initially, I started writing this as a question for Stack Overflow, but then I saw a similar question that was closed as being "off topic" (because it "attracts opinionated answers"), and thought better of it. So here is my question slash rant, and if by some miracle whoever reads this has any suggestions, I would welcome them gratefully.

So suppose we have a JavaScript-heavy website, but for SEO purposes (because Yandex :-( ) the backend needs to send to the client pre-rendered html. Also, suppose that adding a Node.js server for pre-rendering the said html using JavaScript on the server side is not an option, because the website’s backend is not written in Node, backenders aren’t experienced in Node, and they are reluctant to allow an additional component into their beloved stack. So the client is going to be receiving html (and some additional data dumped in a JavaScript object), which it will then need to assimilate into its data sctuctures and make interactive.

Something that can be schematically shown like this (images clickable):

1) The server sends a static prerendered web page

2) The client adds interactivity to the existing elements, and adds further elements when necessary

This approach has been used since the advent of JavaScript, and the tools like jQuery or Backbone (which is essentially an attempt to structure the jQuery code) work very well with it. But a more recent paradigm for building client-rich “single-page” applications is to get only the bare minimum of the html layout from the server (just an empty body essentially) and to build the rest on the client side. I have never seen modern frameworks or libraries such as Angular or React take pre-rendered html and go from there. Meanwhile, jQuery alone is unwieldy and "uncool", and Backbone is stagnating and its ecosystem is looking worrying.

So, considering the pre-render requirement that I described, what are the modern (performant, playing well with ES6 and beyond, pleasurable for developer, etc.) JavaScript options for developing such applications? I looked into Aurelia (which positions itself as sort of Angular done right), but its “progressive enhancement” option doesn't exactly feel like what I am looking for. Vue.js perhaps? I haven’t looked at it closely, but since it uses the real DOM and not the virtual DOM as React does, maybe it will be easy to integrate it in the above workflow? Anything else? Or is there nothing better than Backbone (+ Marionette?) for such kinds of tasks?