SSR配置 | Quasar Framework 中文网

SSR配置

Quasar.conf.js

在这里可以配置一些SSR选项。就像您希望客户端以SPA（单页应用程序-默认行为）或PWA（渐进式Web应用程序）接管一样。

return {
  // ...
  ssr: {
    pwa: true/false, // PWA应该接管（默认值：false）还是SPA？
    componentCache: {...} // lru-cache软件包选项

    // -- @quasar/app v2.3+ --
    // 手动将存储状态注入ssrContext.state中
    manualStoreSsrContextInjection: true/false

    // -- @quasar/app v1.4.2+ --
    // 手动处理存储水化，而不是让Quasar CLI做。
    //   store.replaceState(window.__INITIAL_STATE__)
    manualHydration: true/false,

    // -- @quasar/app v1.9.5+ --
    // 可选; 添加/删除/更改生产版本
    // 生成的package.json的属性
    extendPackageJson (pkg) {
      // 直接更改pkg的属性;
      // 不需要返回任何东西
    },

    // -- @quasar/app v1.5+ --
    // 可选的; 仅用于生产环境下调用的Web服务器部分
    // 的webpack config对象（/src-ssr/）
    //（不适用于开发环境）
    extendWebpack (cfg) {
      // 直接更改cfg的属性；
      // 无需返回任何内容
    },

    // -- @quasar/app v1.5+ --
    // 可选的; 等效于extendWebpack()，但使用webpack-chain；
    // 仅用于生产环境下调用的Web服务器部分（/src-ssr/）
    //（不适用于开发环境）
    chainWebpack (chain) {
      // chain是Webpack配置的
      // webpack-chain实例
    }
  }
}

如果您决定使用PWA客户端接管（这是一个杀手组合），那么也会安装Quasar CLI PWA模式。您可能还想查看Quasar PWA指南。但最重要的是，请确保您阅读了使用PWA的SSR页。

在构建时，extendWebpack()和chainWebpack()将再接收一个参数（对象），该参数当前包含isServer或isClient布尔属性，因为将有两个Webpack构建（一个用于服务器端，另一个用于客户端）。

// quasar.conf.js
build: {
  extendWebpack(cfg, { isServer, isClient }) { ... }
}

如果您需要更多信息，请参阅此页面，该页面详细介绍了在quasar.conf.js文件中的Webpack处理。

Nodejs服务器

在Quasar项目中添加SSR模式意味着将创建一个新文件夹：/src-ssr，其中包含定义您的生产版本Node webserver的SSR特定文件：

.
└── src-ssr/
    ├── index.js      # 服务应用的生产版本Node webserver 
    └── extension.js  # 生产和开发服务器的通用代码

您可以自由编辑这些文件。您不需要使用Express服务器。只需选择最适合您的内容，然后根据需要进行调整。

注意几件事：

这些文件在Node上下文中运行（Babel不会编译它们），因此请仅使用Node版本支持的ES6功能。 (https://node.green/)
如果从node_modules导入任何内容，请确保在package.json>dependencies中指定了该包，而在devDependencies中未指定。
请勿更改这两个文件的名称。但是，您可以添加任何可能需要的其他文件。只需考虑一下，如果您想为生产和开发同时配置Node webserver，则需要将其添加到/src-ssr/extension.js文件中
当开发服务器使用/src-ssr/extension.js时，它假定配置已准备好供Express服务器使用。因此，请相应地计划。如果切换到另一台服务器，则可能需要将extension.js与生产服务器（index.js）分离。
（@quasar/app v1.5+)）/src-ssr是通过Webpack配置构建的（仅用于生产环境）。 **当Quasar App CLI构建您的应用程序时，您将看到此标记为“Webserver”。**您可以通过quasar.conf.js链接/扩展这些文件的Webpack配置：

return {
  // ...
  ssr: {
    // ...

    // -- @quasar/app v1.5+ --
    // 可选的; 仅用于生产环境下调用的Web服务器部分
    // 的webpack config对象（/src-ssr/）
    //（不适用于开发环境）
    extendWebpack (cfg) {
      // 直接更改cfg的属性；
      // 无需返回任何内容
    },

    // -- @quasar/app v1.5+ --
    // 可选的; 等效于extendWebpack()，但使用webpack-chain；
    // 仅用于生产环境下调用的Web服务器部分（/src-ssr/）
    //（不适用于开发环境）
    chainWebpack (chain) {
      // chain是Webpack配置的
      // webpack-chain实例
    }
  }
}

帮助SEO

开发SSR而不是SPA的主要原因之一是要注意SEO。通过使用Quasar Meta插件管理搜索引擎所需的动态html标记，可以大大改善SEO。

启动文件

在SSR模式下运行时，您的应用程序代码必须是同构的或“通用的”，这意味着它必须同时在Node上下文和浏览器中运行。这也适用于您的启动文件。

但是，在某些情况下，您只希望某些引导文件仅在服务器上或仅在客户端上运行。您可以通过指定以下内容来实现：

// quasar.conf.js
return {
  // ...
  boot: [
    'some-boot-file', // 在服务器和客户端上运行
    { path: 'some-other', server: false } // 此启动文件仅嵌入在客户端
    { path: 'third', client: false } // 该启动文件仅嵌入在服务器端
  ]
}

不过，只需确保您的应用程序是一致的。

当引导文件在服务器上运行时，您将可以访问默认导出功能上的另一个参数（称为“ssrContext”）：

// 一些启动文件
export default ({ app, ..., ssrContext }) => {
  // ssrContext有: { url, req, res }

  // 您可以将属性添加到ssrContext中，然后在src/index.template.html中使用它们。
  // 示例-假设我们ssrContext.someProp ='some value'，那么在index模板中我们可以引用它：
  // {{ someProp }}
}

当您在src/index.template.html中添加此类引用（上例中用括号括起来的someProp）时，请确保告诉Quasar它仅对SSR构建有效：

<!-- index.template.html -->
<% if (ctx.mode.ssr) { %>{{ someProp }} <% } %>

阅读更多?