Add server-side rendering to Vue template

[SteveSandersonMS]

Add server-side rendering to Vue template.

[SteveSandersonMS]

At the moment, there are limitations that mean this would be more trouble than it's worth.

• If you try to build vue-server-renderer with Webpack, the builds always report:

  WARNING in ./~/vue-server-renderer/build.js
  6827:15-6830:9 Critical dependency: the request of a dependency is an expression

  This is because vue-server-renderer/build.js really does have a dynamic 'require' in it. As per vue-server-renderer doesn't work with Webpack 2 (dynamic require functions) vuejs/vue#4463, the Vue maintainers say they expect you to use node externals, which is not as good as SSR in Angular/React that supports fully self-contained bundles that are way easier to deploy. We have already tried earlier versions of the JavaScriptServices Angular/React SSR templates that involved deploying node_modules, and it caused huge amounts of trouble - this is why the templates now only deploy self-contained bundles.

• You have to use createBundleRenderer to have your code execute in a distinct Node VM context for every request, because Vue relies on mutating top-level global variables to communicate between its own modules (e.g., the __VUE_SSR_CONTEXT__ object needed to register the styles that components use). Unfortunately, vue-ssr-webpack-plugin (which generates the bundle) doesn't seem to support Webpack's DllReferencePlugin, so if you're not using Webpack externals, you end up generating very large bundles that:

  [1] According to the Vue folks, won't perform well, because large amounts of code get re-parsed on every request (though I don't see why - it should be possible to cache a Node vm.Script instance and invoke it in a new context for every request)

  [2] Can't reference certain NPM modules, such as node-fetch (or for a less relevant example, yargs), because the vue-ssr-webpack-plugin fails to bundle them properly (not sure why, but the error is 'Cannot find module "."' if you have a console.log(require('node-fetch')) in your SSR JSON bundle). In turn, this prevents using things like domain-task/fetch, because it depends on node-fetch.

Short-term recommendation
If the Vue team were able to fix vue-ssr-webpack-plugin's support for DllReferencePlugin, that might be enough to solve both problems. But they should also check that they aren't re-parsing the bundle code on every request anyway - it should be possible to re-use a vm.Script instance AFAICT.

Longer-term recommendation:
Vue should not rely on mutating global vars as a way of tracking internal user-scoped state. Likewise, developers building Vue apps should not do that either (nobody building server apps thinks it's reasonable to do that). Then all the bundle-rendering stuff would be unnecessary, like it is with Angular/React, and things like Webpack would just work in their normal way.

Until this can work better, it's better for this feature not to be in the default templates.

[RehanSaeed]

This is no longer the case with Vue 2.5.0. Please can you reopen this issue.