Quasar框架开发SSR项目

·  阅读 1203
Quasar框架开发SSR项目

Quasar框架介绍

Quasar Framework一套代码,多终端运行,简介清晰的设计风格,优雅的写法,极其灵活的组件拓展性,源码简直就是艺术,并且大大节省了开发成本。

Quasar是基于Vue.js的开源框架,允许Web开发人员快速创建多种类型的网站/应用:

  • SPAs (单页应用)
  • SSR (服务器端渲染的应用) (+可选的PWA客户端接管)
  • PWA(渐进式网页应用)
  • BEX (浏览器扩展)
  • 通过Cordova或Capacitor构建移动APP(Android、iOS…)
  • 多平台桌面应用(使用Electron)

Quasar允许开发人员编写一次代码,并且使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序,并提供精心编写,速度非常快的Quasar Web组件。

什么是SSR

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

服务器渲染的Quasar应用也可以被视为“同构”或“通用”,这意味着您的大多数应用代码都可以在服务器和客户端上运行。

为什么用SSR

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

更好的SEO,因为搜索引擎抓取工具将直接看到完整渲染的页面。 更快的内容展示时间,尤其是在互联网速度较慢或设备速度较慢的情况下。服务器渲染的标记无需等到所有JavaScript已下载并执行即可显示,因此您的用户将更快地看到完全渲染的页面。通常,这会带来更好的用户体验,并且对于内容展示时间直接与转化率相关的应用而言至关重要。 使用SSR时,还需要考虑一些权衡:

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

在为您的应用程序使用SSR之前,您应该问的第一个问题是您是否真正需要它。这主要取决于内容展示时间对您应用的重要性。例如,如果您要构建一个内部仪表板,那么在初始加载时花费几百毫秒无关紧要,那么SSR可能会显得过大。但是,在内容展示时间绝对重要的情况下,SSR可以帮助您实现最佳的初始负载性能。

SSR构建命令

$ quasar dev -m ssr

# ..或更长的形式:
$ quasar dev --mode ssr

构建生产版本

$ quasar build -m ssr

# ..或更长的形式:
$ quasar build --mode ssr

SSR部署

当部署为SPA或PWA时,由Quasar CLI生成的可分发文件夹可以由静态Web服务器提供。 但是,对于SSR(服务器端渲染)版本,情况并非如此。 在这种情况下,您的可分发内容也包含您的生产版本WEB服务器——可以从/src-ssr中进行调整。

在以SSR模式构建应用程序($ quasar build -m ssr)之后,生成的文件夹包含一个经过调整以与SSR一起使用的独立WEB服务器。

您会注意到它包含一个自己的package.json文件,在服务器上安装PM2后,您的npm启动脚本可能看起来像这样

"scripts": {
  "start": "pm2 start index.js"
}

小结

Quasar开发的几个项目成功落地后,个人认为Quasar是一个较好的框架,只需精力放在业务上,控件库很比较丰富,极大的提高了开发效率。

参考资料

quasar官网地址

github地址

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改