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