vue ssr

• SSR （server side render）服务端渲染，是指由服务侧（server side）完成页面的DOM结构拼接，然后发送到浏览器，为其绑定状态与事件，成为完全可交互页面的过程。
• CSR（client side render）客户端渲染，是指由客户端（client side）JS完成页面和数据的拼接，生成DOM结构再交由浏览器渲染成页面的过程。
• SPA（single page application）单页面应用，指只有一张WEB页面的应用，也就是说在导航切换的过程中页面不会刷新，只是局部更新内容。SPA实现的原理就采用了CSR，页面中所有内容由JS控制，需要浏览器进行JS解析才能显示出来。
• SEO（search engine optimization）搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
• SSG（static side generate），无需服务器实时动态编译，在构建时针对特定路由简单的生成静态HTML文件，我们也可称之为预渲染。
• AJAX（Asynchronous Javascript And XML）异步JS&XML，前台发送AJAX请求后并不会阻塞其他操作，数据接手后再异步更新页面，也就是说可以在不重新加载整个网页的情况下，对网页的局部数据进行更新。
   

SEO是通过抓取我们网页源码中的关键字来建立索引库的，单页面的这种源码中没有内容，而通过js添加进去的网站就会被搜索引擎直接pass掉了。【爬虫爬取的是静态html，通过js动态添加的dom不会被爬取】

ssr官网

https://ssr.vuejs.or

概念

服务端渲染：将vue实例渲染为HTML字符串直接返回，在前段激活为交互程序

优点

• seo
• 首屏内容到达时间

服务端知识

express

npm i express -S

基础的http服务

npm i nodemon -g
nodemon 01-express-test.js  //代码改变服务自动重启  优于node 01-express-test.js

//nodejs代码
const express = require('express')

//获取express实例
const server = express()


//编写路由处理不同url请求
server.get('/',(req,res)=>{
  res.send('<h1>hello world</h1>')
})

//监听端口
server.listen(80,()=>{
  console.log('server running!')
})

基础实现

使用渲染器将vue实例渲染为HTML字符串并返回

安装vue-server-renderer

npm i vue vue-server-renderer -S

确保版本匹配，应都为2.6.11

//nodejs代码
const express = require('express')

//获取express实例
const server = express()
const Vue = require('vue')
//2 获取一个渲染器实例
const { createRenderer } = require('vue-server-renderer')
const renderer = createRenderer()
//编写路由处理不同url请求
server.get('/', (req, res) => {
  //1 创建一个vue实例
  const app = new Vue({
    template: "<div @click='onclick'>{{msg}}</div>",
    data(){
      return {msg:'vue ssr'}
    },
    methods: {
onclick(){
  console.log('asd')
}
    }
  })

  //3 用渲染器渲染vue实例
  renderer.renderToString(app).then(html => {
    res.send(html)
  }).catch(err => {
    res.status(500)
    res.send('Internal Server Error , 500')
  })
})

//监听端口
server.listen(80, () => {
  console.log('server running!')
})

激活 

显然，上面代码的“onClick”事件无反应，那么如何激活他们，让js运转起来呢？