前端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 到页面的很多重要内容。

学习链接：

1、如何用vue做ssr？https://www.cnblogs.com/wangshiyang/p/6565624.html

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

3.从0开始，搭建vue2.0的ssr服务系列之一：https://segmentfault.com/a/1190000009352740

4.基于vue的服务器端渲染：https://www.cnblogs.com/jcscript/p/7574276.html

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