一.SEO及网站渲染
SEO（Search Engine Optimization）：汉译为搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
网站的渲染本质一样，都是字符串拼接，将数据渲染进一些固定格式的html代码中形成最终的html展示在用户页面上。拼接字符串必然引起性能的消耗。
1.「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；
浏览器会直接接收到 经过服务器计算之后的HTML字符串，（计算：服务器经过解析存放在服务器端的模板文件），浏览器只进行了HTML的解析，把HTML所代表的图像显示给用户。服务端渲染都是针对第一次get请求，用于生产完整的html给浏览器，浏览器直接出首屏。后端渲染的网站点击一下，就会刷新一个，然后从后台请求新的页面数据。
好处：前端耗时少（前端只负责将html进行展示），利于SEO
坏处：网络传输数据量大，占用（部分、少部分）服务器运算资源，response 出的数据量会（稍）大点，模板改了前端的交互和样式什么的一样得跟着联动修改。
2.「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；
前端渲染就是指浏览器会从后端得到一些信息，这些信息或许angularjs的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。前端拿到信息后，组织排列形成最终可读的HTML字符串。
客户端渲染都是针对客户端状态变化，请求了数据，进行局部dom变化（局部可能大到整个body）。
react/vue在这种场景下，服务端仅仅将jsx/模版转换成html，客户端根据props/state变化，协调虚拟dom和真实dom之间的同步。
好处：
- 局部刷新。无需每次都进行完整页面请求
- 懒加载。如在页面初始时只加载可视区域内的数据，滚动后rp加载其它数据，可以通过 react-lazyload 实现
- 富交互。使用 JS 实现各种酷炫效果
- 节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可
- 天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现
- JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用
坏处：前端耗时较多，不利于SEO，首屏加载慢。由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。特别是网速差的时候，让用户等待白屏结束并非一个很好的体验。
3.「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。例如vue/react的服务器渲染.
二、vue-cli3解决SEO以及首屏加载问题
1.vue ssr
优点：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。更快的内容到达时间(time-to-content)，特别是 对于缓慢的网络情况或运行缓慢的设备。
缺点：浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用；一些外部扩展库(external library)可能需要特殊 处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求。
更多的服务器端负载。
2.nuxt.js
Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。甚至可以用它来做为静态站生成器。比ssr更加简单亲民。
3.预渲染：prerender-spa-plugin插件。
如果只是改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。
三、vue预渲染
由于项目只是改善少数页面的seo，所以使用预渲染方式，预渲染插件使用vue官方推荐的prerender-spa-plugin。
使用步骤:
1.安装：cnpm i prerender-spa-plugin --save-dev
(注意：要使用cnpm而不用npm，因为这个插件依赖puppeteer插件，会附带下载chrome，因为墙npm可能会一直按照不成功。）
2.在main.js中添加mounted
new Vue({
el: \'#app\',
router,
components: { App },
template: \'<App/>\',
mounted() {
document.dispatchEvent(new Event(\'render-event\'));
}
})
3.在build/webpack.prod.conf.js中添加
const PrerenderSPAPlugin = require(\'prerender-spa-plugin\')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
plugins: [
......
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, \'../dist\'),
// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
routes: [\'/\'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: \'bar\'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event(\'render-event\'))，两者的事件名称要对应上。
renderAfterDocumentEvent: \'render-event\',
renderAfterTime: 5000
})
})
]
4.npm run build 打包后 dist/index.html（或其他文件）中有出现页面内容则为成功。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
