为什么捐赠
API 资源管理器
升级指南
新增!
quasar.config 文件
转换为使用 Webpack 的 CLI
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资源
启动文件
预取功能
API 代理
处理 Webpack
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码风格检查器
测试与审计
开发移动应用
Ajax 请求
将开发服务器开放到公网
Quasar CLI 与 Webpack - @quasar/app-webpack
什么是 SSR

Quasar 和 Vue.js 是用于构建客户端应用程序的框架。默认情况下,Quasar Vue 组件在浏览器中生成和操作 DOM 作为输出。但是,也可以在服务器上将相同的组件渲染成 HTML 字符串,将它们直接发送到浏览器,最后在客户端将静态标记“水化”成一个完全交互式的应用程序。

从某种意义上说,服务器渲染的 Quasar 应用程序也可以被认为是同构通用的,因为您的大部分应用程序代码都在服务器和客户端上运行。

为什么选择 SSR?

与传统的 SPA(单页应用程序)相比,SSR 的优势主要在于

  • 更好的 SEO,因为搜索引擎爬虫将直接看到完全渲染的页面。
  • 更快的加载内容时间,尤其是在网络缓慢或设备缓慢的情况下。服务器渲染的标记不需要等到所有 JavaScript 下载并执行才能显示,因此您的用户将更快地看到完全渲染的页面。这通常会导致更好的用户体验,并且对于内容加载时间与转化率直接相关的应用程序至关重要。

使用 SSR 时也需要考虑一些权衡

  • 开发限制。特定于浏览器的代码只能在某些生命周期钩子内使用;某些外部库可能需要特殊处理才能在服务器渲染的应用程序中运行。
  • 更大的服务器端负载。在 Node.js 中渲染一个完整的应用程序显然比仅仅提供静态文件需要更多的 CPU 密集型操作,因此,如果您预计流量很大,请做好应对相应服务器负载的准备,并明智地使用缓存策略。

在为您的应用程序使用 SSR 之前,您应该首先问自己的问题是您是否真的需要它。这主要取决于内容加载时间对您的应用程序有多重要。例如,如果您正在构建一个内部仪表板,其中初始加载的额外几百毫秒并不重要,那么 SSR 将是一种过度使用。但是,在内容加载时间绝对至关重要的情况下,SSR 可以帮助您获得最佳的初始加载性能。


此页面部分内容摘自官方Vue.js SSR 指南