vue.js服務端渲染是什麼

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

本教學操作環境：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中文網其他相關文章！