vue SSR分享

一、什么是服务端渲染（SSR）？

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

对于vue的项目，服务端渲染指的是，服务器端将Vue的页面和对应的业务数据，在服务器直接完全渲染成html字符串后，再发送至浏览器, 最后在浏览器中混合为可交互的应用程序。

二、为什么seo是spa项目的痛点

网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：

1. 从 meta 标签中读取 keywords 、 description 的内容。
2. 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。
3. 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）
4. 像 h1 - h6 标签是具有不同程度的强调意义的。 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。
   爬虫在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到。

spa正好就踩到了痛点，只有一个主要的页面（index.html），而且页面里的内容还很少，通常只有 router-view 或者带有 id 的 div 标签。其跳转和业务逻辑的行为都是靠执行js才行的。

三、为什么要做服务端渲染或者说服务端渲染的好处

1. 更好的 SEO，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
2. 更快的内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备

四、vue服务端渲染实现方式

1. vue-server-render
2. nuxt.js
3. prerender-spa-plugin(预渲染) +vue-meta-info （动态设置meta 信息）

vue-server-render

思路

1、universal Application Code是服务器端和浏览器端通用的代码
2、app.js是应用程序的入口entry，对应vue cli生成的项目的main.js文件
3、entry-client.js是客户端入口，仅运行于浏览器，entry-server.js是服务器端入口，仅运行于服务器
4、entry-client和entry-server这两个文件都需要通过webpack构建，其中entry-client需要通过webpack.client.config.js文件打包，entry-server需要通过webpack.server.config.js文件打包
5、entry-client构建后的client Bundle打包文件是vue-ssr-client-manifest.json，entry-server构建后的server Bundle打包文件是vue-ssr-server-bundle.json
6、server.js文件将客户端打包文件vue-ssr-client-manifest.json、服务器端打包文件vue-ssr-server-bundle.json和HTML模板混合，渲染成HTML

推荐在动手之前，先了解官方文档和 官方Vue SSR Demo，这会让我们事半功倍。
官方示例demo目录结构:

│  manifest.json                # progressive web apps配置文件
│  package.json                 # 项目配置文件
│  server.js                    # 服务端渲染
│  
├─public                                        # 静态资源
│      logo-120.png
│      logo-144.png
│      logo-152.png
│      logo-192.png
│      logo-384.png
│      logo-48.png
│      
└─src
    │  app.js                   # 整合 router,filters,vuex 的入口文件
    │  App.vue                  # 根 vue 组件
    │  entry-client.js              # client 的入口文件
    │  entry-server.js              # server 的入口文件
    │  index.template.html          # html 模板
    │  
    ├─api
    │      create-api-client.js         # Client数据源配置
    │      create-api-server.js         # server数据源配置
    │      index.js             # 数据请求API
    │      
    ├─components
    │      Comment.vue              # 评论组件
    │      Item.vue             # 
    │      ProgressBar.vue          # 进度条组件
    │      Spinner.vue              # 加载提示组件
    │     
    ├─router
    │      index.js             # router配置
    │      
    ├─store                 # Vue store模块
    │      actions.js               # 根级别的 action
    │      getters.js               # 属性接口
    │      index.js             # 我们组装模块并导出 store 的地方
    │      mutations.js             # 根级别的 mutation
    │      
    ├─util
    │      filters.js               # 过滤器
    │      title.js             # 工具类
    │      
    └─views
            CreateListView.js           # 动态生成列表界面的工厂方法
            ItemList.vue            # List界面组件
            ItemView.vue            # 单List项组件
            UserView.vue            # 用户界面组件

参考链接：
1. 官方文档
2. 官方Vue SSR Demo
3. Vue项目SSR改造实战

Nuxt.js

1. 介绍：

Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

2. Nuxt.js是特点（优点）：
•基于 Vue.js
•自动代码分层
•服务端渲染
•强大的路由功能，支持异步数据
•静态文件服务
•ES6/ES7 语法支持
•打包和压缩 JS 和 CSS
•HTML头部标签管理
•本地开发支持热加载
•集成ESLint
•支持各种样式预处理器： SASS、LESS、 Stylus等等

3. Nuxt目录结构

|-- .nuxt                            // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets                           // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components                       // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts                          // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware                       // 用于存放中间件
|-- pages                            // 用于存放写的页面，我们主要的工作区域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放静态资源文件，比如图片
|-- store                            // 用于组织应用的Vuex 状态管理。
|-- .editorconfig                    // 开发工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用于检查代码格式
|-- .gitignore                       // 配置git不上传的文件
|-- nuxt.config.json                 // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

参考链接：
1. 官方文档

预渲染(Prerending)+vue-meta-info

• 什么是预渲染？

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

• 使用预渲染的优缺点
  优点：
  1. 代码侵入性最低
  2. 开发成本最少
  缺点：
  1. 不能很好地处理用户独特性路由
  2. 经常变动的文件
  3. 需要预渲染成千上万的路由文件（编译时间过长）
• 使用场景
  预渲染的使用场景更多是简单的静态页面。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站，比如电商网站。
• 具体步骤（这里主要针对vue-cli2方式）

  1. 安装： cnpm install prerender-spa-plugin --save-dev（建议使用cnpm,避免安装过程无端报错）

  2. build/webpack.prod.conf.js中进行配置

  3. main.js中进行配置

  4. npm run build打包生成的dist文件查看是否有每个路由名称对应的文件夹。
     
     

  5. vue-meta-info插件，网页meta标签
     安装： npm install vue-meta-info --save-dev

  6. main.js中引入使用

     import MetaInfo from 'vue-meta-info' 
     Vue.use(MetaInfo)
     

  7. 在xxx.vue文件里配置具体meta信息

     export default {
         // 这些代码会转成网页的meta标签里的内容
         metaInfo: {
             title: '标题',
             meta: [
                 {
                     name: 'keywords',
                     content: '关键字'
                 },
                 {
                     name: 'description',
                     content: '网页描述'
                 }
             ]
         }
     

  备注： 预渲染方式下的route需采用history模式，否则每个打包生成的index.html的文件内容会一样
  参考链接：
  1. 具体实现细节可参考:vue-cli2,cli3具体配置
  2. 处理 Vue 单页面 SEO 的另一种思路
  3. prerender-spa-plugin