- 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官网
概念
服务端渲染:将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运转起来呢?