前后端分离之SEO优化--------以vue为例

   前言----SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。

 历史概况：

十年前，几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但转眼间三年过去了，很多当时壮心满满的框架（rendr、Lazo）从先驱变成了先烈。同构到底是不是未来？自己的项目该如何选型？我想不应该只停留在追求热门和拘泥于固定模式上，忽略了前后端渲染之“争”的“核心点”，关注如何提升“用户体验”。

明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

1.网站的渲染模式----服务端渲染和客户端渲染

    1.1服务端渲染（后端渲染SSR） 

        后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。

        好处：前端耗时少（前端只负责将html进行展示），利于SEO

        坏处：网络传输数据量大，占用（部分、少部分）服务器运算资源，response 出的数据量会（稍）大点，模板改了前端的交互和样式什么的一样得跟着联动修改

   

     1.2客户端渲染（前端渲染CSR）------SPA---单页面应用

        前端渲染就是指浏览器会从后端得到一些信息，这些信息或许angularjs的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。这些形式都不重要，重要的是，将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示。

        好处：网络传输数据量小（减少了服务器压力）

        坏处：前端耗时较多，不利于SEO

2.前端渲染遇到的问题---seo和首屏问题

     SEO 很好理解。由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。特别是网速差的时候，让用户等待白屏结束并非一个很好的体验。     

2.1解决前端渲染SEO问题

    近几年，随之前端SPA框架的兴起；由前后端分离带来的SEO问题，相信每个前端攻城狮都有遇到。这里以Vue为例来说说解决SEO的方法；

    2.1.1 vue------SSR

         首先vue2.x直接提供了一份完整的构建Vue服务端渲染。 Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

具体的使用指南--------------------------------请移步官方文档

    2.1.2 vue------Nuxt.js

     从头搭建一个服务端渲染的应用是相当复杂的。幸运的是 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。

Nuxt.js是创建Universal Vue.js应用程序的框架。

它的主要范围是UI渲染，同时抽象出客户端/服务器分布。

我们的目标是创建一个足够灵活的框架，以便您可以将其用作主项目库或基于Node.js的当前项目。

Nuxt.js预先设置了使Vue.js应用服务器的开发更加愉快的所有配置。

另外，我们还提供另一个名为nuxt generate的部署选项。它将构建一个静态生成的 Vue.js应用程序。我们相信这个选择可能是微软服务开发Web应用程序的下一个重要步骤。

作为一个框架，Nuxt.js提供了很多功能，可以帮助您在客户端和服务器端之间进行开发，如异步数据，中间件，布局等。

以上是Nuxt.js的官方介绍，总的来说Nuxt.js是一个基于Vue的框架，大部分都是vue的东西，看一遍例子再研究研究，也是很容易上手的。总体来说是个不错的框架，不需要去配置webpack那些繁琐的东西，很大程度上的让vue-ssr更加的亲民了。

个人感觉nuxt的性价比有点低，其实我建议你自己用vue-ssr接口去实现 需要实现的功能可以从nuxt里扒这样构建工程的思路更清晰些。

2.2预渲染的方式---prerender（解决SEO,首屏问题）

    由于页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。

    Prerender服务需要有NodeJs环境支持，如果之前服务器环境没有NodeJs需要先进行安装。

    在webpack的配置如下：

    

var PrerenderSpaPlugin = require('prerender-spa-plugin')

var webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    //这段代码意思是拷贝static文件至根目录使得渲染的文件可以找到js、css
    new CopyWebpackPlugin([{
      from: 'static'
    }]),
    new PrerenderSpaPlugin(
    //将渲染的文件放到dist目录下
      path.join(__dirname, '../dist'),   
      //需要预渲染的路由信息
      [ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
      {
      //在一定时间后再捕获页面信息，使得页面数据信息加载完成
        captureAfterTime: 50000,
        //忽略打包错误
        ignoreJSErrors: true,
        phantomOptions: '--web-security=false',
        maxAttempts: 10,
      }
    ),

另：Prerender需要路由使用history模式，使用hash模式会导致失效。

   通俗的说：预渲染的本质就是在打包的时候通过插件将js提前执行一遍，然后再将有内容的html放到服务器上，这样爬虫自然可以抓到，首屏的问题也可以得到解决。