使用 Vite 的 Quasar CLI - @quasar/app-vite
Quasar 和 Vue.js 是用于构建客户端应用程序的框架。默认情况下,Quasar Vue 组件会在浏览器中生成和操作 DOM 作为输出。但是,也可以在服务器上将相同的组件渲染成 HTML 字符串,将它们直接发送到浏览器,最后在客户端将静态标记“水化”成一个完全交互式的应用程序。
从某种意义上说,服务器渲染的 Quasar 应用程序也可以被认为是同构
或通用
的,因为您的大部分应用程序代码都可以在服务器和客户端上运行。
为什么要使用 SSR?
与传统的 SPA(单页应用程序)相比,SSR 的优势主要在于
- 更好的 SEO,因为搜索引擎爬虫可以直接看到完全渲染的页面。
- 更快的页面内容加载速度,尤其是在网络速度慢或设备性能较差的情况下。服务器端渲染的标记无需等待所有 JavaScript 下载并执行即可显示,因此用户能够更快地看到完整渲染的页面。这通常会导致更好的用户体验,并且对于内容加载速度直接影响转化率的应用程序至关重要。
使用 SSR 也需要考虑一些权衡。
- 开发限制。浏览器特定的代码只能在某些生命周期钩子内使用;一些外部库可能需要特殊处理才能在服务器端渲染的应用程序中运行。
- 更大的服务器端负载。在 Node.js 中渲染整个应用程序显然比仅提供静态文件更消耗 CPU,因此,如果您预计流量较高,请做好应对相应服务器负载的准备,并明智地运用缓存策略。
在为您的应用程序使用 SSR 之前,您应该首先问的问题是您是否真的需要它。这主要取决于内容加载速度对您的应用程序有多重要。例如,如果您正在构建一个内部仪表板,其中初始加载的额外几百毫秒并不重要,那么 SSR 就有点矫枉过正了。但是,在内容加载速度绝对至关重要的案例中,SSR 可以帮助您实现最佳的初始加载性能。
此页面部分内容摘自官方的 Vue.js SSR 指南.