前言
Quasar Framework一套代码，多终端运行，简介清晰的设计风格，优雅的写法，极其灵活的组件拓展性，源码简直就是艺术
quasar官网地址： http://www.quasarchs.com/quasar-cli/developing-ssr/build-commands
github地址： https://github.com/quasarframework/quasar
什么是Quasar
Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：
- 响应式网站
- PWA（Progressive Web App）
- 通过Apache Cordova构建移动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"
}
网友评论