SSR——服务器渲染

什么是SSR

SSR（Server-Side-Rendering），服务器渲染，顾名思义，即在服务端生成网页所需的HTML，将HTML字符串传递给浏览器，最后在浏览器将静态HTML“激活”，使其能够交互。

SSR的优势

• 更快的首屏加载速度

• 更好的SEO：SEO（Search Engine Optimization），搜索引擎优化

  Google 和 Bing 可以很好地对同步 JavaScript 应用进行索引。这里的“同步”是关键词。如果你的应用以一个 loading 动画开始，然后通过 Ajax 获取内容，爬虫并不会等到内容加载完成再抓取。也就是说，如果 SEO 对你的页面至关重要，而你的内容又是异步获取的，那么 SSR 可能是必需的。

SSR需要更高的服务器负载

在 Node.js 中渲染一个完整的应用要比仅仅托管静态文件更加占用 CPU 资源，因此如果你预期有高流量，请为相应的服务器负载做好准备，并采用合理的缓存策略

因此在使用服务器渲染技术前，我们需要考虑我们是否正真需要SSR：

• 如果类似看板数据分析页面，页面的加载时间仅差几百ms级别，那么完全不需要SSR
• 如果你的页面不那么依赖于SEO，也不需要SSR

与SSG对比

SSG（Static-Site-Generate），静态站点生成，也称为与渲染。例如博客、产品介绍的网页，这种不需要动态数据的网页，服务器只需要渲染一次，提前在构建过程中完成，然后作为静态文件被托管，而不是每次请求进来都重新渲染页面。

相比SSR

• 它同样有更快的首屏加载速度
• 它输出静态HTML和文件，因此它的花销更小，且部署更简单
• 同样支持更好的SEO
• 如果你去需要静态页面可以试试VitePress——基于Vue的静态站点生成器

创建SSR应用

服务端需要

1. 创建vue应用
2. 将应用转化为HTML字符串
3. 通过接口发给浏览器

浏览器需要

1. 激活静态HTML（没太懂，感觉还是需要在客户端渲染？

事实上，我们需要为同一个应用执行两次构建过程：一次用于客户端，一次用于服务器。

一些通用的SSR框架

Nuxt

Nuxt 是一个构建于 Vue 生态系统之上的全栈框架，它为编写 Vue SSR 应用提供了丝滑的开发体验。更棒的是，你还可以把它当作一个静态站点生成器来用！我们强烈建议你试一试。

Quasar

Quasar 是一个基于 Vue 的完整解决方案，它可以让你用同一套代码库构建不同目标的应用，如 SPA、SSR、PWA、移动端应用、桌面端应用以及浏览器插件。除此之外，它还提供了一整套 Material Design 风格的组件库。

Vite SSR

Vite 提供了内置的 Vue 服务端渲染支持，但它在设计上是偏底层的。如果你想要直接使用 Vite，可以看看 vite-plugin-ssr，一个帮你抽象掉许多复杂细节的社区插件。

更多可以看Vue-SSR指南

快学nodejs-express然后再来试试服务器渲染！

• ssr应用实践
• nodejs-express+ssr