首頁 > web前端 > Vue.js > vue.js服務端渲染是什麼

vue.js服務端渲染是什麼

coldplay.xixi
發布: 2020-11-30 14:04:18
原創
3070 人瀏覽過

vue.js服務端渲染是在瀏覽器中輸出Vue元件,進行產生DOM和操作DOM,然而,也可以將同一個元件渲染為伺服器端的HTML字串,將它們直接傳送到瀏覽器,最後將這些靜態標記"啟動"為客戶端上完全可互動的應用程式。

vue.js服務端渲染是什麼

本教學操作環境:windows10系統、vue2.9,本文適用於所有品牌的電腦。

【相關文章推薦:vue.js

#什麼是伺服器端渲染 (SSR)?

Vue.js 是建立客戶端應用程式的框架。預設情況下,可以在瀏覽器中輸出 Vue 元件,進行產生 DOM 和操作 DOM。然而,也可以將同一個元件渲染為伺服器端的 HTML 字串,將它們直接傳送到瀏覽器,最後將這些靜態標記"啟動"為客戶端上完全可互動的應用程式。

伺服器渲染的 Vue.js 應用程式也可以被認為是"同構"或"通用",因為應用程式的大部分程式碼都可以在伺服器和用戶端上運行。

為什麼要使用伺服器端渲染 (SSR)?

與傳統SPA (單頁應用程式(Single-Page Application)) 相比,伺服器端渲染(SSR) 的優點主要在於:

  • 更好的SEO,由於搜尋引擎爬蟲抓取工具可以直接查看完全渲染的頁面。

  • 請注意,截至目前,Google 和 Bing 可以很好地對同步 JavaScript 應用程式進行索引。在這裡,同步是關鍵。如果你的應用程式初始展示 loading 菊花圖,然後透過 Ajax 取得內容,抓取工具並不會等待非同步完成後再行抓取頁面內容。也就是說,如果 SEO 對你的網站至關重要,而你的頁面又是非同步取得內容,則你可能需要伺服器端渲染(SSR)來解決此問題。

  • 更快的內容到達時間 (time-to-content),特別是對於緩慢的網路情況或運行緩慢的裝置。無需等待所有的 JavaScript 都完成下載並執行,才顯示伺服​​器渲染的標記,所以你的用戶將會更快速地看到完整渲染的頁面。通常可以產生更好的使用者體驗,對於那些「內容到達時間(time-to-content) 與轉換率直接相關」的應用程式而言,伺服器端渲染 (SSR) 至關重要。

使用伺服器端渲染 (SSR) 時還需要有一些權衡之處:

  • 開發條件所限。瀏覽器特定的程式碼,只能在某些生命週期鉤子函數 (lifecycle hook) 中使用;一些外部擴充程式庫 (external library) 可能需要特殊處理,才能在伺服器渲染應用程式中執行。

  • 涉及建置設定和部署的更多要求。與可以部署在任何靜態檔案伺服器上的完全靜態單頁面應用程式 (SPA) 不同,伺服器渲染應用程序,需要處於 Node.js server 運行環境。

  • 更多的伺服器端負載。在Node.js 中渲染完整的應用程序,顯然會比僅僅提供靜態文件的server 更加大量佔用CPU 資源(CPU-intensive - CPU 密集),因此如果你預料在高流量環境(high traffic) 下使用,請準備相應的伺服器負載,並明智地採用快取策略。

在對你的應用程式使用伺服器端渲染 (SSR) 之前,你應該問的第一個問題是,是否真的需要它。這主要取決於內容到達時間 (time-to-content) 對應用程式的重要性。例如,如果你正在建立一個內部儀表板,初始載入時的額外幾百毫秒並不重要,這種情況下去使用伺服器端渲染 (SSR) 將是一個小題大作之舉。然而,內容到達時間 (time-to-content) 要求是絕對關鍵的指標,在這種情況下,伺服器端渲染 (SSR) 可以幫助你實現最佳的初始載入效能。

伺服器端渲染vs 預渲染(SSR vs Prerendering)

如果你研究伺服器端渲染(SSR) 只是用來改善少數行銷頁面(例如/, / about, /contact 等)的SEO,那麼你可能需要預先渲染。無需使用 web 伺服器即時動態編譯 HTML,而是使用預先渲染方式,在建置時 (build time) 簡單地產生針對特定路由的靜態 HTML 檔案。優點是設定預渲染更簡單,並且可以將你的前端作為一個完全靜態的網站。

相關免費學習推薦:JavaScript(影片)

#########

以上是vue.js服務端渲染是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板