SSR（服务端渲染）

SPA:单页面应用
优点：交互体验好，无刷新。有利于前后端分离，减轻服务器压力。
缺点：不利于SEO，首次加载过慢
解决办法：SSR（服务端渲染解决）

（CSR）客户端渲染：客户端发送请求后，先加载index.html文件，但上面的数据还没渲染，当加载完js代码和vue后数据才成功渲染到html上，一切都是在浏览器进行执行的。
(SSR)服务器渲染：客户端发送请求后，服务器渲染好html页面，直接返回给浏览器。

SEO:使用程序获取网页内容，根据一套特定规则分析网页内容。
爬虫：使用程序获取并分析网页内容的行为，称之为爬虫。（发送请求，解析数据）

/**
 * 任何服务端技术都可以做爬虫
 * Java、PHP、Python、Ruby、。。。。Node.js。。。
 */
const http = require('http')

// 1. 获取网页内容
// http.get('http://127.0.0.1:5500/csr.html', (res) => {
  let rawData = '';
  res.on('data', (chunk) => { rawData += chunk; });

  res.on('end', () => {
    console.log(rawData)
  })
})
// 单页面应用为什么不利于SEO？因为爬虫不管你js代码的解析，只会获取到这个链接请求的页面，然而spa的页面只有一个模板没有内容。
// 2. 分析

vue服务端渲染
（专注于，使用 Node.js server 的服务器端单页面应用程序渲染，也可以使用奇其他服务端进行渲染，但需要等过的配置：https://ssr.vuejs.org/zh/guide/non-node.html）
简单示例：

npm install vue vue-server-renderer --save
 渲染一个 Vue 实例
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')

const app = new Vue({
  template: `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `,
  data: {
    message: 'Hello World'
  }
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
// renderer.renderToString(app).then(html => {
//   console.log(html)
// }).catch(err => {
//   console.error(err)
// })


 与服务器集成
 npm install express --save
const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('/', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Hello</title>
          <meta charset="UTF-8" />
        </head>
        <body>${html}</body>
      </html>
    `)
  })

})

app.listen(3000, () => console.log('Server running at port 3000.'))

想达到生产级别这些远远还不够，需要继续阅读书写更多配置。想了解服务器端的详细配置可以看官方提供的工程：链接
想快速上手请使用nuxt.js框架

SSR（服务端渲染）

悦读