服务端渲染（SSR）

1. 什么是服务端渲染(SSR)

概念：网页通过服务端渲染生成后输出给客户端

2.服务端渲染的优缺点

优点：

1. 更好的搜索引擎优化 (SEO)，因为搜索引擎爬虫会直接读取完整的渲染出来的页面（页面有异步加载的内容且 SEO 很重要，那么你可能需要 SSR）
2. 更快的页面呈现，不需要等所有js下载下来才显示。（比如更快的看到完整的首屏加载）

缺点：

1. 一些外部的库在服务端渲染中使用可能需要特殊的处理。（比如有些库只有在window下才能正常运行，所有需要进行判断）
2. 需要更多的部署要求。（服务端渲染应用需要一个能够运行 Node.js 服务器的环境）
3. 更多的服务端负载。（渲染一个完整的应用肯定需要比一个单页面应用更密集的CPU运算）

3.服务端渲染与预渲染

预渲染：在页面构建阶段为指定路由生成静态页面

• 预渲染只能预先加载是完全静态页面
• 项目路由如果很多不适合预渲染
• 比SSR设置少
• webpack通过 prerender-spa-plugin 来支持预渲染

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports={
 // 因为高版本Vue将配置文件整合到了vue.config.js,所以原先写在webpack配置里的都需要写在configureWebpack里
 configureWebpack: {
   // plugins插件里书写
   plugins: [
     new PrerenderSPAPlugin({
      // 生成文件的路径，这个目录只能有一级。若目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动
      staticDir: path.join(__dirname, './dist'),
      // 对应自己的路由文件
      routes: [ '/', '/article'],
      // 若没有这段则不会进行预编译
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false,
       // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
       renderAfterDocumentEvent: 'render-event'
      })
     }),
   ]
 }
}

4.服务端渲染解决方案

nuxt.js