SSR 服务端渲染

SSR 全称为 Server Side Render，指服务端渲染。其原理是将 HTML 页面及其相应的动态数据在服务端进行组装，然后直接将完整的页面呈现在浏览器。

优点：

减少 HTTP 请求，加快首屏渲染，减少白屏时间，用户体验更好；
有利于 SEO（全称为 Search Engine Optimization，中译为搜索引擎优化），渲染完成后直接返回生成好内容的静态 HTML。

缺点：

前端开发工作由后端来完成，分工不明确；代码不易维护。
消耗更多的服务器资源。

实例：
本案例中使用版本如下：
“node”:“v10.15.3”;
“express”: “^4.17.1”;
“mysql”: “^2.17.1”;
“vue”: “^2.6.11”;
“vue-server-renderer”: “^2.6.11”

创建 package.json 文件。
npm init
安装 express \ mysql \ vue \ vue-server-renderer。
npm express mysql vue vue-server-renderer --save
创建 index.html，内容如下：
生成 HTML 模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h3>{{title}}</h3>
<!--vue-ssr-outlet--> <!--注意：这是 JS 生成的 DOM 节点插入的地方,前面的一段注释 vue-ssr-outlet 一定要-->
</body>
</html>

创建 sqlConfig，内容如下：
连接数据库

var mysql = require('mysql');
var connection = mysql.createConnection({
    host     : '127.0.0.1',
    port     : '3306',
    user     : 'root',
    password : '',
    database : 'exchange'
});
connection.connect();
module.exports = connection;

直接在数据库中写入数据，如下所示：
创建 index.js，内容如下：
动态生成 DOM 节点，获取数据。

const Vue = require('vue');
const server = require('express')();
const fs = require('fs');
var connection = require('./sqlConfig');

//读取 HTML 模版
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.html', 'utf-8')
})
// context 对象中的参数可直接在 HTML 中读取
const context = {
    title: 'Vue-ssr案例',
};
server.get('*', (req, res) => {
    //查询数据库
    connection.query("SELECT * FROM product", [], function (error, results, fields) {
        if (error) throw error;
        var results = results;
        //创建vue实例，将 template 模板中的 DOM 节点挂载到 body 节点上
        const app = new Vue({
            data: {
                data: results,
            },
            //template 中的文本最外层一定要有容器包裹，即只能有一个父级元素，和vue的组件中是一样的，
            template: `
            <div>        
                <p v-for='item in data'>{{item.product_name}}</p>
            </div>
        `
        })
        //将 Vue 实例渲染为字符串
        renderer.renderToString(app, context,  (err, html) => {
            if (err) {
                res.status(500).end('err:' + err)
                return
            }
            //将模版发送给浏览器
            res.end(html)
        });
    });

})
//监听 8080 端口
server.listen(8080,()=>{
    console.log("listening on port 8081")
});