SSR配置

我们将使用Quasar CLI开发和构建SSR网站。 构建SPA、移动应用、Electron应用、PWA或SSR之间的区别仅由“quasar dev”和“quasar build”命令中的“mode”参数确定。

安装

为了建立一个SSR网站,我们首先需要在我们的Quasar项目中添加SSR模式:

$ quasar mode add ssr

如果您想直接进入并开始开发,可以跳过“quasar mode”命令并发出:

$ quasar dev -m ssr

如果缺少SSR模式,它将自动添加。

Quasar.conf.js

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

return {
  // ...
  ssr: {
    pwa: true/false, // PWA应该接管(默认值:false)还是SPA?
    manualHydration: true/false, // (@quasar/app v1.4.2+) 手动水化存储
    componentCache: {...} // lru-cache软件包选项

    // -- @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服务器。 只需选择最适合您的内容,然后根据需要进行调整。

注意几件事:

  1. 这些文件在Node上下文中运行(Babel不会编译它们),因此请仅使用Node版本支持的ES6功能。 (https://node.green/)

  2. 如果从node_modules导入任何内容,请确保在package.json>dependencies中指定了该包,而在devDependencies中未指定。

  3. 请勿更改这两个文件的名称。 但是,您可以添加任何可能需要的其他文件。 只需考虑一下,如果您想为生产和开发同时配置Node webserver,则需要将其添加到/src-ssr/extension.js文件中

  4. 当开发服务器使用/src-ssr/extension.js时,它假定配置已准备好供Express服务器使用。 因此,请相应地计划。 如果切换到另一台服务器,则可能需要将extension.js与生产服务器(index.js)分离。

  5. (@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 (htmlWebpackPlugin.options.ctx.mode.ssr) { %>{{ someProp }} <% } %>