Introduction to the Vue 2.0 Server-side Rendering

1 What is server-side rendering SSR

server side render

It is to use the backend to distribute templates, rather than obtaining data through the frontend ajax and splicing strings.

2 Why SSR is needed

SEO is required because crawlers won't wait for ajax results.

The client network is slow and the loading speed is slow, which affects the user experience.

3 Another solution Pre-rendering

Instead of downloading the entire single-page application at once, pre-rendering is just to generate a few specific static pages for a specific route during construction.

You can simply add prerender-spa-plugin using prerender-spa-plugin

4 NodeJS writes Vue's SSR

First of all, npm install --save-dev has vue express vue-server-renderer

// 

'use strict';

var fs = require('fs');
var path = require('path');

 = require('vue')

var layout = ('./', 'utf8')

var renderer = require('vue-server-renderer').createRenderer()

var express = require('express')
var server = express()

('/assets',(
  (__dirname,'assets')
))


('*',function(req, res){

  // Render Vue instances into HTML  (
    // Create an application instance    require('./assets/app')(),

    // Process the rendering results    function(error, html){
      if(error){
        (error);
        return res
          .status(500)
          .send('Server Error')
      }
      // Send layout and HTML files      (('&lt;div &gt;&lt;/div&gt;', html))

    }
  )
})


(5000, function(error){
  if(error) throw errorr;
  ('Server is running at localhost:5000')
})

//  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="" charset="utf-8"></script>
  <script src="/assets/" charset="utf-8"></script>
</head>
<body>

  <div ></div>
  <script src="/assets/" charset="utf-8"></script>
  <script type="text/javascript">app.$mount('#app')</script>


</body>
</html>

// assets/

(function() {
  'use strict'
  var createApp = function() {
    return new Vue({
      template: '&lt;div &gt;You've spent it here {{ counter }} Second。&lt;/div&gt;',
      data: {
        counter: 0
      },
      created: function() {
        var vm = this;
        setInterval(function(){
           += 1;
        },1000)
      }
    })
  }

  // Expose the interface  if(typeof module !== 'undefined' &amp;&amp; ) {
     = createApp
  } else {
     = createApp()
  }

}).call(this)

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.