quasar.config 檔案
您可以在此處設定一些 SSR 選項。例如，如果您希望客戶端接管為 SPA（單頁應用程式 – 預設行為）或 PWA（漸進式 Web 應用程式）。
return {
// ...
ssr: {
ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
// will mess up SSR
extendSSRWebserverConf (esbuildConf) {},
// add/remove/change properties
// of production generated package.json
extendPackageJson (pkg) {
// directly change props of pkg;
// no need to return anything
},
pwa: false,
/**
* Manually serialize the store state and provide it yourself
* as window.__INITIAL_STATE__ to the client-side (through a <script> tag)
* (Requires @quasar/app-vite v1.0.0-beta.14+)
*/
manualStoreSerialization: false,
/**
* Manually inject the store state into ssrContext.state
* (Requires @quasar/app-vite v1.0.0-beta.14+)
*/
manualStoreSsrContextInjection: false,
/**
* Manually handle the store hydration instead of letting Quasar CLI do it.
* For Pinia: store.state.value = window.__INITIAL_STATE__
* For Vuex: store.replaceState(window.__INITIAL_STATE__)
*/
manualStoreHydration: false,
/**
* Manually call $q.onSSRHydrated() instead of letting Quasar CLI do it.
* This announces that client-side code should takeover.
*/
manualPostHydrationTrigger: false,
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process∙env∙PORT is specified at runtime)
middlewares: [
'render' // keep this as last one
]
}
}如果您決定採用 PWA 客戶端接管（這是一個絕佳組合），Quasar CLI PWA 模式也將被安裝。您可能還想查看 Quasar PWA 指南。但最重要的是，請務必閱讀 SSR 與 PWA 頁面。
如果您想修改 /src 中 UI 的 Vite 設定
module.exports = function (ctx) {
return {
build: {
extendViteConf (viteConf, { isClient, isServer }) {
if (ctx.mode.ssr) {
// do something with ViteConf
}
}
}
}
}手動觸發 store hydration
預設情況下，Quasar CLI 會處理客戶端 Vuex store 的 hydration（如果您使用它）。
但是，如果您希望自己手動進行 hydration，則需要設定 quasar.config 檔案 > ssr > manualStoreHydration: true。一個好的例子是從 啟動檔案 執行此操作
// MAKE SURE TO CONFIGURE THIS BOOT FILE
// TO RUN ONLY ON CLIENT-SIDE
export default ({ store }) => {
// For Pinia
store.state.value = window.__INITIAL_STATE__
// For Vuex
store.replaceState(window.__INITIAL_STATE__)
}手動觸發 post-hydration
預設情況下，當此包裝器元件被掛載時，Quasar CLI 會包裝您的 App 元件並在客戶端呼叫 $q.onSSRHydrated()。這是客戶端接管的時刻。您無需設定任何內容即可使其發生。
但是，如果您希望覆蓋此事件發生的時刻，則需要設定 quasar.config 檔案 > ssr > manualPostHydrationTrigger: true。無論您的原因是什麼（非常自訂的用例），這是一個手動觸發 post hydration 的範例
// App.vue
import { onMounted } from 'vue'
import { useQuasar } from 'quasar'
export default {
// ....
setup () {
// ...
const $q = useQuasar()
onMounted(() => {
$q.onSSRHydrated()
})
}
}Node.js 伺服器
將 SSR 模式添加到 Quasar 專案意味著將建立一個新資料夾：/src-ssr，其中包含 SSR 特定檔案
您可以自由編輯這些檔案。這兩個資料夾中的每一個都在其各自的文件頁面中詳細說明（檢查左側選單）。
注意幾件事
如果您從 node_modules 匯入任何內容，請確保該套件在 package.json > “dependencies” 中指定，而不是在 “devDependencies” 中。
/src-ssr/middlewares是透過單獨的 Esbuild 設定建置的。您可以透過/quasar.config檔案擴展這些檔案的 Esbuild 配置
return {
// ...
ssr: {
// ...
extendSSRWebserverConf (esbuildConf) {
// tamper with esbuildConf here
},
}
}/src-ssr/server.js檔案在 SSR Webserver 頁面中有詳細說明。如果您需要支援無伺服器功能，請特別閱讀它。
協助 SEO
當您開發 SSR 而不是 SPA 的主要原因之一是為了照顧 SEO。透過使用 Quasar Meta Plugin 來管理搜尋引擎所需的動態 html 標記，可以大大改善 SEO。
啟動檔案
當在 SSR 模式下執行時，您的應用程式碼需要是同構或“通用”的，這意味著它必須在 Node 環境和瀏覽器中運行。這也適用於您的 啟動檔案。
但是，在某些情況下，您可能只想讓某些啟動檔案僅在伺服器上或僅在客戶端運行。您可以透過指定來實現這一點
return {
// ...
boot: [
'some-boot-file', // runs on both server and client
{ path: 'some-other', server: false }, // this boot file gets embedded only on client-side
{ path: 'third', client: false } // this boot file gets embedded only on server-side
]
}不過，請確保您的應用程式是一致的。
當啟動檔案在伺服器上運行時，您將可以在預設匯出的函數上存取另一個參數（稱為 ssrContext）。
export default ({ app, ..., ssrContext }) => {
// You can add props to the ssrContext then use them in the /index.html.
// Example - let's say we ssrContext.someProp = 'some value', then in index template we can reference it:
// {{ someProp }}
}當您將此類參考（範例中括號括起來的 someProp）新增到 /index.html 中時，請確保告訴 Quasar 它僅對 SSR 建置有效
<% if (ctx.mode.ssr) { %>{{ someProp }} <% } %>