2023 年，我个人最大的变化，是从 Vue3 SPA 应用向 Nuxt3 SSR 应用过渡，在预期可能存在 SSR 需求的项目中，都尽量使用 SSR。包括 React 应用，也尽量使用 Next.js，而不是 React SPA。

这个过程中，面临到很多问题，很多思路需要转换，很多以前没关注的点需要关注。这则视频试图快速教会大家这些要点，帮助大家顺利从 SPA 切换到 SSR。

什么是 SSR？为什么要 SSR？

SSR 是什么？

服务器端渲染（Server-Side Rendering，SSR）指的是在服务器上完成网页渲染并将将其发送给客户端的过程。

为什么需要 SSR？

SSR 发送给客户端的是包含了完整内容的网页，这样用户可以先看到网页的内容，而不需要等待“网页加载 > 执行 JS > 加载数据 > 渲染到网页“，从而提升用户体验。另一方面，因为网页内已经包含了具体内容，对搜索引擎也更加友好。

我强烈推荐你认真观看我的这个视频：【视频】从浏览器渲染机制理解 Web 性能， 深入了解为什么 SSR 能改善用户体验。

与传统服务器语言的对比

很久之前，我们用 PHP 之类的语言输出 HTML，但是我们并不称其为“服务器端渲染”，因为现在的 SSR 有更多的优化：

1. 语言同构化：开发难度降低。
2. 数据传递与状态管理：虽然还是 JSON，但框架尽量帮我们做好了。
3. 渲染函数由边缘计算负责：更快的速度。
4. 页面切换时不会重新加载。

SSR 的一般构成

当谈论服务器端渲染（SSR）时，一般构成包括以下几个关键部分：

1. 服务器端应用程序：这是运行在服务器上的应用程序，负责接收客户端请求，执行渲染过程，并返回渲染后的页面给客户端。
2. 路由：服务器端应用程序需要能够根据客户端请求的不同路径，调用对应的渲染逻辑和数据获取方法。
3. 模板引擎：用于将页面模板和数据结合，生成最终的 HTML 内容。我们目前会使用的模版引擎都基于某款 MVVM 框架。