最近一直在研究的東東, 趁着週末閒着不如記錄下來…
SPA(單頁面應用)項目對於SEO(搜索引擎優化)非常不利，爬蟲爬SPA應用的時候，所有的頁面源碼都是下面的樣子(Ctrl +U 就可以查看網頁源代碼)。
<html>
<head>
<title>Single Page Application</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
在index.html入口文件中設置title,meta信息等是整個項目所有頁面共用的，
有SEO需求頁面的title,meta信息是無法定製化的，網頁中的內容如商品信息等爬蟲更無從知道。
因此想支持SEO，SPA需要SSR。
SSR可以在訪問特定頁面的時候，返回特定頁面的title,meta信息以及html源碼。（簡單粗暴的理解，當然不止於此）
那麼SPA做SSR,有幾種辦法呢？
1.預渲染 使用 webpack prerender-spa-plugin組件
2.vue ssr 使用 vue-server-renderer package
3.Nuxt.js 框架
4.使用prerender.io 等技術 (https://prerender.io/)
在這裏比較一下幾種方法的優缺點，如有差錯，歡迎指正啦~
1.預渲染 使用 webpack prerender-spa-plugin組件
優點：
1.是簡單，易用代價小。特別是在SPA應用開發完成階段，如果有SEO需求的話可以採用這個方法.
2.vue-cli項目可以使用，因爲vue-cli項目不支持vue-server-renderer哦!!! 想求證的可以去vue-cli的github issue中查看。
缺點：
1.只支持靜態路由，動態路由不支持，例如 /good/:goodNo ,帶param的路由不支持。
2.數據頻繁變動的頁面，不適合。
預渲染是在編譯階段生成的靜態html，如果編譯後數據有變化，訪問頁面的時候會出現先顯示舊數據，再顯示新數據的現象。
用戶體驗不佳，還可能給用戶造成誤會。
其實這一點可以想辦法避免，具體問題具體分析。
3. 頁面太多會增加編譯的時間。但我覺得也不會有那麼多頁面需要支持SEO,這一點也可以忽略。
2.vue ssr 使用 vue-server-renderer package
優點：
就是使用vue-server-renderer可以達到SEO的效果啦，適合使用 vuejs+webpack架構的應用，而不是使用vue-cli的項目
缺點：
要配置的東西太多了，大家都在重複造輪子。
3.Nuxt.js 框架
優點：
是一個基於vue.js的支持SSR的框架，內部封裝的是方法2的東西，會讓開發者省去繁瑣的配置和顧慮，統一一種開發風格。
如果項目處在選型階段，並且有SEO需求，強烈推薦！！
缺點：
emmm…因爲沒用過，坑肯定會有吧…
4.使用prerender.io 等技術 (https://prerender.io/)
優點：
對於開發好的SPA應用，可以不動代碼而是通過web服務器配置和增加一臺node服務器就可以解決。
缺點：
如果seo需求超過250個頁面，收費。
還需要服務器cost…
因爲我們是vue-cli框架，並且項目馬上要上線了，現在提出seo需求…
太南了o(╥﹏╥)o…
方法2和3果斷pass，這個時候改框架，不現實。
方法1和4中二選一，因爲4需要費用，最終選擇了1。
但是方法1不支持動態路由，那麼動態路由的頁面由backend負責做服務器渲染，渲染的方法參考4的實現思路。
即nginx中追究配置，判斷如果是爬蟲來訪，就重定向到backend走服務器渲染，否則正常訪問前端頁面。
下一篇預計寫一下預渲染時遇到的坑以及解決方案。
本文中一部分內容，參考下面文章。
https://blog.naver.com/aha-aha/221471483565