搭配 Vite 的 Quasar CLI - @quasar/app-vite
Quasar 和 Vue.js 是用於構建客戶端應用程式的框架。 預設情況下,Quasar Vue 組件在瀏覽器中產生和操作 DOM 作為輸出。 然而,也可以在伺服器上將相同的組件渲染成 HTML 字串,直接將它們發送到瀏覽器,最後在客戶端將靜態標記「注水」成完全互動的應用程式。
伺服器渲染的 Quasar 應用程式也可以被認為是 同構
或 通用
的,因為您應用程式的大部分程式碼都在伺服器和客戶端上運行。
為什麼選擇 SSR?
與傳統 SPA (單頁應用程式) 相比,SSR 的優勢主要在於
- 更好的 SEO,因為搜尋引擎爬蟲可以直接看到完全渲染的頁面。
- 更快的内容呈現時間,尤其是在網路速度慢或裝置效能較差的情況下。 伺服器渲染的標記不需要等到所有 JavaScript 都下載並執行完畢才顯示,因此您的使用者將更快看到完全渲染的頁面。 這通常會帶來更好的使用者體驗,並且對於內容呈現時間與轉換率直接相關的應用程式至關重要。
使用 SSR 時,也需要考慮一些權衡
- 開發限制。 瀏覽器特定的程式碼只能在特定的生命週期鉤子內使用; 某些外部函式庫可能需要特殊處理才能在伺服器渲染的應用程式中運行。
- 更多的伺服器端負載。 在 Node.js 中渲染完整的應用程式顯然比僅提供靜態檔案更耗費 CPU 資源,因此如果您預期高流量,請為相應的伺服器負載做好準備,並明智地採用快取策略。
在為您的應用程式使用 SSR 之前,您應該問的第一個問題是您是否真的需要它。 這主要取決於內容呈現時間對您的應用程式有多重要。 例如,如果您正在構建一個內部儀表板,初始載入時多幾百毫秒並不那麼重要,那麼 SSR 將會是大材小用。 然而,在內容呈現時間絕對關鍵的情況下,SSR 可以幫助您實現最佳的初始載入效能。
本頁面的部分內容取自官方的 Vue.js SSR 指南。