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

¥Quasar and Vue.js are frameworks for building client-side applications. By default, Quasar Vue components produce and manipulate DOM in the browser as output. However, it is also possible to render the same components into HTML strings on the server, send them directly to the browser, and finally “hydrate” the static markup into a fully interactive app on the client.

服务器渲染的 Quasar 应用也可以被视为 isomorphic 或 universal，这意味着应用的大部分代码都在服务器和客户端上运行。

¥A server-rendered Quasar app can also be considered isomorphic or universal, in the sense that the majority of your app’s code runs on both the server and the client.

为什么要使用 SSR？(Why SSR?)

¥Why SSR?

与传统的 SPA（单页应用）相比，SSR 的优势主要在于：

¥Compared to a traditional SPA (Single-Page Application), the advantage of SSR primarily lies in:

• 更好的 SEO，因为搜索引擎爬虫将直接看到完整渲染的页面。

  ¥Better SEO, as the search engine crawlers will directly see the fully rendered page.

• 内容加载速度更快，尤其是在网速慢或设备速度慢的情况下。服务器渲染的标记无需等到所有 JavaScript 都下载并执行完毕即可显示，因此你的用户将更快地看到完全渲染的页面。这通常会带来更好的用户体验，并且对于内容发布时间与转化率直接相关的应用至关重要。

  ¥Faster time-to-content, especially on slow internet or slow devices. Server-rendered markup doesn’t need to wait until all JavaScript has been downloaded and executed to be displayed, so your user will see a fully-rendered page sooner. This generally results in better user experience, and can be critical for applications where time-to-content is directly associated with conversion rate.

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

¥There are also some trade-offs to consider when using SSR:

• 开发限制。特定于浏览器的代码只能在某些生命周期钩子中使用；某些外部库可能需要特殊处理才能在服务器渲染的应用中运行。

  ¥Development constraints. Browser-specific code can only be used inside certain lifecycle hooks; some external libraries may need special treatment to be able to run in a server-rendered app.

• 更多服务器端负载。在 Node.js 中渲染完整的应用显然会比仅仅提供静态文件更耗费 CPU 资源，因此如果你预计流量较大，请做好相应的服务器负载准备，并明智地使用缓存策略。

  ¥More server-side load. Rendering a full app in Node.js is obviously going to be more CPU-intensive than just serving static files, so if you expect high traffic, be prepared for corresponding server load and wisely employ caching strategies.

在你的应用中使用 SSR 之前，你应该问的第一个问题是你是否真的需要它。它主要取决于内容加载时间对你的应用有多重要。例如，如果你正在构建一个内部仪表板，初始加载的额外几百毫秒并不那么重要，那么服务器端渲染 (SSR) 就显得有些过度了。但是，在内容加载时间至关重要的情况下，SSR 可以帮助你实现最佳的初始加载性能。

¥Before using SSR for your app, the first question you should ask is whether you actually need it. It mostly depends on how important time-to-content is for your app. For example, if you are building an internal dashboard where an extra few hundred milliseconds on initial load doesn’t matter that much, SSR would be an overkill. However, in cases where time-to-content is absolutely critical, SSR can help you achieve the best possible initial load performance.

本页面部分内容摘自官方 Vue.js 服务器端渲染指南。

¥Parts of this page are taken from the official Vue.js SSR guide.