Vue.js on the server

[thelinuxlich]

Wouldn't be cool to require vue on node.js and use browserify to reuse viewmodels? :)

[yyx990803]

This is definitely something I'm interested in, could also be used for pre-rendering the page on server side for initial speed and SEO. But the way Vue is built assumes the presence of the DOM, so it requires a full DOM simulation in Node like jsdom, which can be quite heavy. I'll probably mess around to see how much work it would be when I have time, but at the moment I'm focusing more on consolidating the core API and plugin spec.

[duckbox]

One of my thoughts on this when this came in up in the roadmap, instead of jsdom being ran on runtime, it would be a task. You would execute the task during dev, compile a manifest object of how the data is intercepted in the DOM and output it as a bootstrap of sorts for the initial load. Obviously this would require a vue plugin to read the manifest contents and bind the data to the pre-rendered markup.

[zhang-ning]

At server side there is no necessary to manpulate dom with a data binding libary , but if you guys are talking and interesting in the prebuild process like what component did , I am one of you. And recently the riverjs wrote by me contains this feature and also data binding , there is a build to make the prebuild process worked , you can see it from my responstery or install riverjs -g from npm.

[yyx990803]

Tested and Vue can work with jsdom to provide a pre-rendered version of the page. However, making Vue being able to pick up an already rendered page seems to require too much internal hassle. It is probably easier to just use a service like prerender.io.

On the other hand - @thelinuxlich 's idea of reusing Components on npm is already feasible, because Component definitions do not have to assume the existence of Vue in most cases.

[jonatansberg]

@yyx990803 How much work would it be to adapt Vue to run without access to a full DOM?

[yyx990803]

@mrlundis Vue's template and compile mechanisms relies on an existing HTML parser and live DOM nodes, so pretty much it requires a half re-write, and I don't think that's feasible at the moment. But as I've tested, it does work with jsdom...

[ChrisCinelli]

"making Vue being able to pick up an already rendered page seems to require too much internal hassle." It is a shame., I really like vue.js and this will make it almost the perfect framework.

[robertleeplummerjr]

I was racking my brain thinking of how would be the best way to achieve prerendering, and @yyx990803 your comment on http://prerender.io ... WHAT A WINNER! In particular their bit on using hashes - found here: https://prerender.io/documentation . And, no I don't work for them, just building a single page app engine ( https://github.com/Enpowi/Enpowi ). I'm curious is combining your lib with a routing engine like http://millermedeiros.github.io/crossroads.js/ ideal in your opinion?

[yyx990803]

@robertleeplummerjr Vue can pair with pretty much any routing lib, it really depends on which routing lib you like the best ;)

[robertleeplummerjr]

*high fives @yyx990803 *
I don't want to brag... but javascript rules.

[Pines-Cheng]

before the SEO problem of the front side render templates is perfect solved,I really think server side render is worth to consider by vuejs.

[fullfs]

@Pines-Cheng Try this https://github.com/ngsru/vue-server

[ansarizafar]

@yyx990803 you mentioned in Vue forum:
Someone came up with a custom pre-rendering solution for Vue which is blazing fast, but it's not open source.

Could you please share the contact details of the person so that we can request him to opensource his custom pre-rendering solution. I want to use Vue but I badly need SSR feature for my next project. SSR is a must have feature, if Vue wants to compete with other frameworks like React, Angular2 and Aurelia.

[yyx990803]

@ansarizafar it's already been open sourced: https://github.com/ngsru/vue-server

[ansarizafar]

@yyx990803 I have seen this repo before. It doesn't look like a perfect solution. Any chance of an official SSR solution? I have worked with React/Angular2 and recently Aurelia but after playing with Vue I dont want to use any other framewok. I request you to consider working on this feature to make Vue the best framework in 2016.

[smolinari]

With my limited knowledge, I'd agree with @ansarizafar. Having a "reworked" version of Vue for SSR is sub-optimal, even though I understand it might not work any other way (except the jsdom way).

Just throwing out thoughts here, but wouldn't it be possible to go with a hybrid for desktop web applications (which are spidered), where Vue is melded into standard server rendered templates (like what Laravel is doing), and couldn't those components made for the desktop web application also be reusable in a full Vue application (pure client-side rendering), which would be reserved for say, back-end (non-spidered) web applications and mobile apps?

The key I am sure everyone is looking for is reusability above and beyond any SEO concerns. Doesn't Vue components give us that? Or would components built for a desktop web application not be compatible with a full Vue web application?

Scott

[fullfs]

@ansarizafar @smolinari Hello! Well yeah guys, you're absolutely right.
Many of us want Vue.js to be SSR, want it to be official, perfect and etc. I'm also one of those who asked @yyx990803 for this.
It may look easy, but it's not. It's a hell of a work to make it this way. Also remember Vue.js doesn't have a team of developers working for salary like React. It's @yyx990803 alone (well not quite, but still) who's developing all the stuff.
I've made Vue-server.js because I understood that. I wanted to help, but I've also felt like I'm not that skilled to help developing Vue.js itself, but I think its still something.
I there any help you guys could provide in the direction?

P.S. Vue-server.js. is not perfect, it has restrictions and etc, but still... it's being used at production already. You can even get a perfect isomorphic app if you get used to it and understand the way it works. I'm also ready to ask any related queston.

[smolinari]

No disrespect to your work meant at all on my part @fullfs. I hope that is understood. 😄

In fact, I can appreciate the effort you've made a lot.

It's just that two parallel projects with similar goals (although Vue doesn't have the SSR goal) is wasted effort and practically useless from a "userland dev's" perspective. That is, from what I understand, you've rewritten parts of Vue to make it also work server-side. Please correct me if I am wrong.

If I am correct and your project were to be a module or plugin that just ties into Vue or works with Vue, that would make it much more attractive. Does that make sense?

Scott

[fullfs]

@smolinari Yeah, I understand you mean now offence, its just I feel for @yyx990803. I mean he's already doing insanely great job. And I get a bit emotional about it.

About Vue-server.js you're right. Its just independent module that shares some part of code with Vue.js and probably it has no future, I'm also okay with it.
It was made for a single practical purpose: we needed SSR at our project while using Vue.js. We've already reached the goal. Open sourcing it was just a bonus.
I also hope some day Vue.js will support SSR nativly, but until then, if you really need SSR while using Vue.js - Vue-server.js will help you.

[lichenhao]

How about list all the stable spec and all the developers force on that, so we can write some engine like VUE-LLVM for node translate.

[smolinari]

Not sure you all know this, but the plan is to have SSR capability built into Vue.js 2.0. 😄

#2873

Scott