前端SEO与爬虫与SSR(Server Side Render)

　　讲真，以前没考虑过这个问题。由于项目缘由，本身用python的一些工具，爬取了淘宝、京东、百度等的一些图片和图片名称之类的信息。觉得爬虫只是解析html文本，而后提取关键字，保存本身想要的信息便可，或者再不济就用个Selenium WebDriver去调用浏览器，从未想过爬虫与页面的关系。

　　在此以前，你们得了解了解H5语义化: http://www.daqianduan.com/6549.html ，能够看看这篇文章，写的很透彻。语义化就是为了代码具备可读性，提升了代码的可维护性，可让页面结构清晰，有利于SEO和爬虫解析。div是非语义化标签，一个 div 看起来总没有一个 p 意义更明显。虽然如今 H5 出了一些语义化标签，好比 <header>/<section>/<footer>/<article> ，可是其实各大网站上用的不多，一方面是为了兼容低版本的浏览器，另外一方面也多是前端工程师（好比我），没有意识到语义化的重要性。

　　如今咱们谈谈SEO（Search Engine Optimization ），SEO是搜索引擎优化，说简单点，就是你的前端的页面最好能让机器也很容易的看懂，而且轻松提取关键字。SEO在搜索引擎时代对于网站来说意义重大，对于网站的流量导入，起着重大的做用。能够看看：https://www.v2ex.com/t/302616 。而纯前端的项目，因为须要页面加载完成后再去拉取数据进行渲染，大部分搜索引擎无法读取页面内容。特别是SPA项目，更是没法读取到每一个路由页面的页面Title。在首屏渲染上，纯前端项目，先要加载Js，再经过Js去加载数据，这两部分网络传输都须要时间，因此难以免出现页面白屏时间，体验不友好。因此就出现了SSR。

　　SSR（server side render），就是服务端渲染，服务器将每一个要展现的页面都运行完成后，将整个相应流传送给浏览器，全部的运算在服务器端都已经完成，浏览器只须要解析 HTML 就行。浏览器渲染对爬虫不友好，也就是对SEO不友好，因此就出现了服务器端渲染。 Vue2.0在服务端建立了虚拟DOM，所以能够在服务端能够提早渲染出来，这解决了单页面一直存在的问题：SEO和初次加载耗时较多的问题。同时在真正意义上作到了先后端共用一套代码。要用SSR，得准备一个node server（express，koa…），这也不可避免地加大了性能、运维等挑战。

下面举个栗子：

　　好比用户A在上海某个局域网打开了  https://live.kuaishou.com/ ，用户B在背景某个局域网也打开了  https://live.kuaishou.com/ ，这是两个client，都向 live.kuaishou.com （前端服务器）发起了页面请求，假设前端服务器的物理机器在C地。前端服务器接受请求后，先向后台请求数据，通常前端服务器和后台同源，不跨域；（若是跨域，前端服务器和后台约定跨域策略）。前端服务器获得数据后，有两种选择。一是该页面初始模板发送给用户浏览器，用户浏览器等JavaScript 都完成下载并执行，本身输出 Vue 组件，进行生成 DOM 和操做 DOM，也就是浏览器端渲染页面（CSR）。另外一种就是将同一个组件渲染为服务器端的 HTML 字符串，将HTML 字符串直接发送到用户浏览器，最后将这些静态标记"激活"为客户端上彻底可交互的应用程序，这就是服务器端渲染（SSR）。

　　在CSR这里，同步是关键。若是 live.kuaishou.com 页面某些部分初始展现 loading 菊花图，而后经过 Ajax 获取内容，爬虫抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，若是 SEO 对站点相当重要，而页面又是异步获取内容，则须要服务器端渲染(SSR)解决此问题。这样在客户端页面实际上是静态的，这样方便抓取工具就能 get 到页面的不少重要内容。

学习连接：

一、如何用vue作ssr？http://www.javashuo.com/article/p-necpjzak-db.html

2.从0开始，搭建vue2.0的ssr服务(推荐)：https://www.jianshu.com/p/c6a07755b08d

3.从0开始，搭建vue2.0的ssr服务系列之一：http://www.javashuo.com/article/p-ehgtvwyh-dh.html

4.基于vue的服务器端渲染：http://www.javashuo.com/article/p-ahyjtocm-w.html

5.从Script、Code Behind到MVC、MVP、MVVM: http://www.cnblogs.com/indream/p/3602348.html