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
}
}
}
}
}手动触发商店水合
默认情况下，Quasar CLI 会在客户端处理 Vuex 商店（如果您使用它）的水合。
但是，如果您希望手动进行水合，则需要设置 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__)
}手动触发后水合
默认情况下，Quasar CLI 会包装您的 App 组件，并在客户端将此包装组件挂载时调用 $q.onSSRHydrated()。这是客户端接管的时刻。您无需配置任何内容即可实现这一点。
但是，如果您希望覆盖此事件发生的时刻，则需要设置 quasar.config 文件 > ssr > manualPostHydrationTrigger: true。无论您的原因是什么（非常定制的用例），这是一个手动触发后水合的示例
// App.vue
import { onMounted } from 'vue'
import { useQuasar } from 'quasar'
export default {
// ....
setup () {
// ...
const $q = useQuasar()
onMounted(() => {
$q.onSSRHydrated()
})
}
}Nodejs 服务器
将 SSR 模式添加到 Quasar 项目意味着将创建一个新文件夹：/src-ssr，其中包含 SSR 特定的文件
您可以自由编辑这些文件。这两个文件夹中的每一个都在各自的文档页面中详细说明（查看左侧菜单）。
注意几件事
如果您从 node_modules 中导入任何内容，则确保该包在 package.json > “dependencies” 中指定，而不是在 “devDependencies” 中。
The
/src-ssr/middlewares是通过单独的 Esbuild 配置构建的。您可以通过/quasar.config文件扩展这些文件的 Esbuild 配置
return {
// ...
ssr: {
// ...
extendSSRWebserverConf (esbuildConf) {
// tamper with esbuildConf here
},
}
}- The
/src-ssr/server.js文件在 SSR 服务器 页面中详细说明。如果您需要支持无服务器函数，请阅读它。
帮助 SEO
开发 SSR 而不是 SPA 的主要原因之一是处理 SEO。通过使用 Quasar Meta 插件 管理搜索引擎所需的动态 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 }} <% } %>