為什么要寫本文呢,話說現在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>
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
名稱欄目:vuessr實現方式(學習筆記)-創新互聯
標題來源:http://vcdvsql.cn/article16/csesgg.html
成都網站建設公司_創新互聯,為您提供小程序開發、網站內鏈、商城網站、手機網站建設、企業網站制作、電子商務
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯