I explored writing a skin using Vue.js on the server-side. I ended up mapping Vue templates to Mustache templates and ran into some issues with loading styles from Vue components. Adding it in case anything here is of interest.

https://phabricator.wikimedia.org/phame/post/view/243/creating_a_vue.js_based_skin_with_server_side_rendering/

Adding Design-Systems-Team because Design-Systems-team-20200324-20220422 got archived though this open task has no other active project tags associated, so it cannot be found on boards.

@NHillard-WMF Growth-Team's use-case: for the best user experience and performance for our features, we want to use progressive enhancement: deliver meaningful information in the HTML of the page, and provide interactivity when the JavaScript loads. This is especially useful for users with high latency internet connectivity.

The main focus for Growth features and the first location for newcomer editors is Special:Homepage. It currently provides server-side rendering of all the components on the page, which we then enhance as JavaScript loads. We don't want to go from that to a user experience that renders empty boxes or loading interfaces while JavaScript is fetched and executed. (As part of our work in T222310: [EPIC] Positive reinforcement: New Impact Module we are making a compromise to move away from server-side rendering for that specific feature so that we can build the new feature in Vue + Codex, but we consider that acceptable as the Impact module is not the primary component on Special:Homepage.)

As per https://phabricator.wikimedia.org/T313565 we will refine the scope of this ticket to reflect next steps for TDMP process and scope.