為什么要寫本文呢，話說現在vue-ssr 官網上對 vue 服務端渲染的介紹已經很全面了，包括各種服務端渲染框架比如 Nuxt.js 、 集成 Koa 和vue-server-renderer 的 node.js 框架 egg.js，都有自己的官網和團隊在維護，文檔真是面面俱到功能強大，但是，我個人在剛開始看這些資料的時候，總是忍不住發起靈魂三問：“我是誰？我在哪？我在干什么？”，提前沒有相關知識的人開始學這些，肯定是要走一些彎路或者卡在某個點一段時間的，所以我想把我的學習經驗做下總結，一方面方便自己以后查閱，一方面也會在文中加一些針對官網上沒有細說的點的理解，希望能幫助你減少些學習成本，畢竟這是一個知識共享的時代嘛。本文不涉及到源碼解析，主要講解如何實現 vue 的服務端渲染，比較適合 vue-ssr 小白閱讀，下面我們進入正文：
先說下基本概念：
ssr 的全稱是 server side render，服務端渲染，vue ssr 的意思就是在服務端進行 vue 的渲染，直接對前端返回帶有數據，并且是渲染好的HTML頁面；而不是返回一個空的HTML頁面，再由vue 通過異步請求來獲取數據，再重新補充到頁面中。
這么做的最主要原因，就是搜索引擎優化，也就是SEO，這更利于網絡爬蟲去爬取和收集數據。
為什么這樣就有利于網絡爬蟲爬取呢？
這里簡單說一下爬蟲的爬取方式，爬蟲通過訪問 URL 獲取一個頁面后，會獲取當前HTML中已存在的數據，也可以理解為把拿到的 HTML 頁面轉為了字符串內容，然后解析、存儲這些內容，但是如果頁面中有些數據是通過異步請求獲得的，那么爬蟲是不會等待異步請求返回之后才結束對頁面數據的解析的，這樣就會沒有爬取到這部分數據，很不利于其他搜索引擎的收錄。
這也就是為什么單頁面網站是不具備良好的SEO效果的，因為單頁面返回的就是一個基本為空的 HTML 文件，里面就一個帶有ID的元素等待掛載而已，頁面的內容都是通過 js 后續生成的，比如這樣：
<!DOCTYPE html><html lang="en"> <head><title>Hello</title></head> <body><div id="app"></div></body> <script src="bundle.js"></script></html>
但對于很多公司來說，公司的產品是希望能被百度、谷歌等搜索引擎收錄之后，進行排名，進一步的被用戶搜索到，能更利于品牌的推廣、流量變現等操作，要實現這些，就必須保證產品的網頁是能夠被網絡爬蟲爬取到的，顯然一個完整的帶有全部數據的頁面更利于爬蟲的爬取，當然現在也有很多方法可以去實現針對頁面異步數據的爬取，github 上也開源了很多的爬蟲代碼，但是這顯然對于爬蟲來說更加的不友好、成本更高。
新聞熱點
疑難解答
圖片精選
