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

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

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

为什么要使用 SSR?

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

  • 更好的 SEO,因为搜索引擎爬虫可以直接看到完全渲染的页面。
  • 更快的页面内容加载速度,尤其是在网络速度慢或设备性能较差的情况下。服务器端渲染的标记无需等待所有 JavaScript 下载并执行即可显示,因此用户能够更快地看到完整渲染的页面。这通常会导致更好的用户体验,并且对于内容加载速度直接影响转化率的应用程序至关重要。

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

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

在为您的应用程序使用 SSR 之前,您应该首先问的问题是您是否真的需要它。这主要取决于内容加载速度对您的应用程序有多重要。例如,如果您正在构建一个内部仪表板,其中初始加载的额外几百毫秒并不重要,那么 SSR 就有点矫枉过正了。但是,在内容加载速度绝对至关重要的案例中,SSR 可以帮助您实现最佳的初始加载性能。


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