Vue使用預(yù)渲染代替SSR的方法
頁(yè)面渲染方式
前段時(shí)間了解到頁(yè)面有幾種渲染方式:SPA SSR,以前寫(xiě)的一個(gè)網(wǎng)站但是用的渲染方式是 SPA,導(dǎo)致搜索引擎爬蟲(chóng)抓不到任何信息,對(duì) SEO 優(yōu)化不很好,本想改成 SSR,但是改動(dòng)配置很多,弄來(lái)弄去怕影響開(kāi)發(fā),今天在 Vue 官網(wǎng)看到預(yù)渲染,今天試了下,感覺(jué)是一個(gè)折中的方法,而且配置改動(dòng)不大,大家可以試試
什么是服務(wù)器端渲染 (SSR)?
Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下,可以在瀏覽器中輸出 Vue 組件,進(jìn)行生成 DOM 和操作 DOM。然而,也可以將同一個(gè)組件渲染為服務(wù)器端的 HTML 字符串,將它們直接發(fā)送到瀏覽器,最后將這些靜態(tài)標(biāo)記” 激活” 為客戶端上完全可交互的應(yīng)用程序。
服務(wù)器渲染的 Vue.js 應(yīng)用程序也可以被認(rèn)為是” 同構(gòu)” 或” 通用”,因?yàn)閼?yīng)用程序的大部分代碼都可以在服務(wù)器和客戶端上運(yùn)行。
為什么使用服務(wù)器端渲染 (SSR)?
與傳統(tǒng) SPA (單頁(yè)應(yīng)用程序 (Single-Page Application)) 相比,服務(wù)器端渲染 (SSR) 的優(yōu)勢(shì)主要在于:
更好的 SEO,由于搜索引擎爬蟲(chóng)抓取工具可以直接查看完全渲染的頁(yè)面。
請(qǐng)注意,截至目前,Google 和 Bing 可以很好對(duì)同步 JavaScript 應(yīng)用程序進(jìn)行索引。在這里,同步是關(guān)鍵。如果你的應(yīng)用程序初始展示 loading 菊花圖,然后通過(guò) Ajax 獲取內(nèi)容,抓取工具并不會(huì)等待異步完成后再行抓取頁(yè)面內(nèi)容。也就是說(shuō),如果 SEO 對(duì)你的站點(diǎn)至關(guān)重要,而你的頁(yè)面又是異步獲取內(nèi)容,則你可能需要服務(wù)器端渲染 (SSR) 解決此問(wèn)題。
更快的內(nèi)容到達(dá)時(shí)間 (time-to-content),特別是對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。無(wú)需等待所有的 JavaScript 都完成下載并執(zhí)行,才顯示服務(wù)器渲染的標(biāo)記,所以你的用戶將會(huì)更快速地看到完整渲染的頁(yè)面。通常可以產(chǎn)生更好的用戶體驗(yàn),并且對(duì)于那些「內(nèi)容到達(dá)時(shí)間 (time-to-content) 與轉(zhuǎn)化率直接相關(guān)」的應(yīng)用程序而言,服務(wù)器端渲染 (SSR) 至關(guān)重要。
使用服務(wù)器端渲染 (SSR) 時(shí)還需要有一些權(quán)衡之處:
- 開(kāi)發(fā)條件所限。瀏覽器特定的代碼,只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用;一些外部擴(kuò)展庫(kù) (external library) 可能需要特殊處理,才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。
- 涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序 (SPA) 不同,服務(wù)器渲染應(yīng)用程序,需要處于 Node.js server 運(yùn)行環(huán)境。
- 更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序,顯然會(huì)比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集),因此如果你預(yù)料在高流量環(huán)境 (high traffic) 下使用,請(qǐng)準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載,并明智地采用緩存策略。
在對(duì)你的應(yīng)用程序使用服務(wù)器端渲染 (SSR) 之前,你應(yīng)該問(wèn)的第一個(gè)問(wèn)題是,是否真的需要它。這主要取決于內(nèi)容到達(dá)時(shí)間 (time-to-content) 對(duì)應(yīng)用程序的重要程度。例如,如果你正在構(gòu)建一個(gè)內(nèi)部?jī)x表盤(pán),初始加載時(shí)的額外幾百毫秒并不重要,這種情況下去使用服務(wù)器端渲染 (SSR) 將是一個(gè)小題大作之舉。然而,內(nèi)容到達(dá)時(shí)間 (time-to-content) 要求是絕對(duì)關(guān)鍵的指標(biāo),在這種情況下,服務(wù)器端渲染 (SSR) 可以幫助你實(shí)現(xiàn)最佳的初始加載性能。
服務(wù)器端渲染 vs 預(yù)渲染 (SSR vs Prerendering)
如果你調(diào)研服務(wù)器端渲染 (SSR) 只是用來(lái)改善少數(shù)營(yíng)銷頁(yè)面(例如 /, /about, /contact 等)的 SEO,那么你可能需要預(yù)渲染。無(wú)需使用 web 服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯 HTML,而是使用預(yù)渲染方式,在構(gòu)建時(shí) (build time) 簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡(jiǎn)單,并可以將你的前端作為一個(gè)完全靜態(tài)的站點(diǎn)。
如果你使用 webpack,你可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測(cè)試 - 事實(shí)上,作者是 Vue 核心團(tuán)隊(duì)的成員。
使用方法
vue-router 必須是 history 模式
const router = new VueRouter({ mode: 'history', routes: [...] })
安裝預(yù)渲染核心:prerender-spa-plugin
yarn add prerender-spa-plugin -D
在 vue.config.js 配置(低版本 vue 寫(xiě)在 build/webpack.prod.conf.js)
const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer module.exports={ // 因?yàn)楦甙姹綱ue將配置文件整合到了vue.config.js,所以原先寫(xiě)在webpack配置里的都需要寫(xiě)在configureWebpack里 configureWebpack: { // plugins插件里書(shū)寫(xiě) plugins: [ new PrerenderSPAPlugin({ // 生成文件的路徑,這個(gè)目錄只能有一級(jí)。若目錄層次大于一級(jí),在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示,在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng) staticDir: path.join(__dirname, './dist'), // 對(duì)應(yīng)自己的路由文件 routes: [ '/', '/article'], // 若沒(méi)有這段則不會(huì)進(jìn)行預(yù)編譯 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),兩者的事件名稱要對(duì)應(yīng)上。 renderAfterDocumentEvent: 'render-event' }) }), ] } }
在 mian.js 配置,在 mounted 函數(shù)里增加 document.dispatchEvent (new Event (‘render-event'))
new Vue({ el: '#app', router, store, render:h=>h(App), mounted(){ document.dispatchEvent(new Event('render-event')) } })
yarn run build 打包項(xiàng)目,看到自己的頁(yè)面被提前生成就 OK 了
安裝 vue-meta-info 插件,網(wǎng)頁(yè) meta 標(biāo)簽
yarn 安裝
yarn add vue-meta-info
在 mian.js 配置
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
在 XXOO.vue 文件中配置
export default { // 這些代碼會(huì)轉(zhuǎn)成網(wǎng)頁(yè)的meta標(biāo)簽里的內(nèi)容 metaInfo: { title: '標(biāo)題', meta: [ { name: 'keywords', content: '關(guān)鍵字' }, { name: 'description', content: '網(wǎng)頁(yè)描述' } ] }
到此這篇關(guān)于Vue使用預(yù)渲染代替SSR的方法 的文章就介紹到這了,更多相關(guān)Vue預(yù)渲染代替SSR內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Egg Vue SSR 服務(wù)端渲染數(shù)據(jù)請(qǐng)求與asyncData
- 15分鐘學(xué)會(huì)vue項(xiàng)目改造成SSR(小白教程)
- vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
- Vue SSR 即時(shí)編譯技術(shù)的實(shí)現(xiàn)
- 如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
- vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)
- vue的ssr服務(wù)端渲染示例詳解
- vue中vue-router的使用說(shuō)明(包括在ssr中的使用)
- 關(guān)于VueSSR的一些理解和詳細(xì)配置
- Vue.js?狀態(tài)管理及?SSR解析
相關(guān)文章
vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
本文分為html,js和css代碼給大家詳細(xì)介紹了vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版功能,感興趣的朋友一起看看吧2017-10-10Vue3使用postcss-px-to-viewport實(shí)現(xiàn)頁(yè)面自適應(yīng)
postcss-px-to-viewport 是一個(gè) PostCSS 插件,它可以將 px 單位轉(zhuǎn)換為視口單位,下面我們就看看如何使用postcss-px-to-viewport實(shí)現(xiàn)頁(yè)面自適應(yīng)吧2024-01-01Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱效果
v-model 可以實(shí)現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時(shí)允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11解決npm安裝錯(cuò)誤:No matching version found for&
這篇文章主要介紹了解決npm安裝錯(cuò)誤:No matching version found for XXX@3.3.6問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決
這篇文章主要介紹了Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vuejs入門(mén)教程之Vue生命周期,數(shù)據(jù),手動(dòng)掛載,指令,過(guò)濾器
本篇文章主要介紹了Vuejs入門(mén)教程之Vue生命周期,數(shù)據(jù),手動(dòng)掛載,指令,過(guò)濾器的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04Vue+Element-ui日歷排班自定義實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue+Element-ui日歷排班自定義的相關(guān)資料,有現(xiàn)成的日歷插件但是不符合需求,所以項(xiàng)目中使用vue+element的表格組件自己實(shí)現(xiàn)一個(gè)日歷組件,需要的朋友可以參考下2023-09-09