前端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