前言
要知道什么是预渲染和服务端渲染，咱首先得知道是用来干嘛的对吧。
应用场景
主要应用于SPA单页面应用
单页面web应用（SPA） 是目前前端主流框架使用的模式，我们知道任何一个东西有优势基本就有劣势，上帝给你开了门就不会给你留窗户。
spa的优点：更好前后端分离、内容改变不需要重新加载整个页面 spa的缺点：首屏加载慢、白屏、SEO优化不利 问题的来源：SPA是客户端渲染，DOM节点要等JS文件加载完后才会生成 怎么解决问题：就标题的两种方法；预渲染（prerender-spa-plugin） 、服务端渲染（SSR）
服务端渲染（SSR）
是什么：
服务器收到请求后，把组件渲染成HTML字符串，然后返回给客户端，之后客户端再控制渲染
优点：
更好的SEO优化，搜索引擎爬取时可以直接看到完全渲染的页面 更快的内容请求时间，特别是网络比较缓慢的用户或设备比较友好
缺点：
涉及到构建、部署更多的设置和要求 更多的服务器负载
怎么用：
React：Next.js[1]框架 Vue：Nuxt.js[2]框架 目前都比较成熟，且文档比较详细，比较容易上手
预渲染（prerender-spa-plugin）
是什么：
当项目代码构建时（build time）简单地生成一些针对特定路由的静态HTML文件，使浏览器在请求服务器之前就能渲染一些文字或内容，以便于提高SEO优化和首页白屏的缺陷（至少用户可以看到东西不那么焦虑）
优点：
包含SSR的所有优点，但请求时间优化可能没有SSR好 操作极其简单，成本极其低廉，只需要安装一个plugin即可
缺点：
预渲染不适合频繁变动的页面 设置路由越多，构建时间也就越长
怎么用：
安装prerender-spa-plugin 配置plugin
// vue.config.js
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './',
configureWebpack: () => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: resolve('dist'),
routes: ['/', '/about'], // 你需要预渲染的路由
renderer: new Renderer({
inject: {
_m: 'prerender'
},
// 渲染时显示浏览器窗口，调试时有用
headless: true,
// 等待触发目标时间后，开始预渲染
renderAfterDocumentEvent: 'render-event'
})
})
]
}
}
}
}
如果有其他需求还是看看prerender-spa-plugin官方文档[3]吧 在生命周期中调用自定义事件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
mounted () {
// 触发 renderAfterDocumentEvent
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
什么时候用预渲染什么时候用服务器渲染
当项目对于内容请求到达时间需求特别高时用SSR渲染（对服务器性能有要求） 当服务器性能一般且对于内容到达时间没有特别高要求时，用预渲染（成本低，配置简单）
