Nuxt3 首屏加载

SSR

SSR（Server-Side Rendering，服务器端渲染）是一种前端开发技术，它指的是在服务器端生成完整的 HTML 页面，并将其发送给客户端展示

与传统的客户端渲染（Client-Side Rendering，CSR）相比，SSR 的主要区别在于页面的初始渲染是在服务器上完成的，而不是在客户端的浏览器中通过 JavaScript 完成的

在 SSR 中，当用户请求一个页面时，服务器会执行与该页面相关的 JavaScript 代码，并生成页面的 HTML 内容

然后，服务器将完整的 HTML 页面发送给客户端浏览器，浏览器收到后直接展示

与此同时，客户端浏览器加载页面所需的 JavaScript 和 CSS 资源，以便在后续的页面交互中使用

首屏加载

在 Version 1 的版本中我们提到过，虽然我们的 lighthouse 测试是满分的性能，但是实际上，这是由于我们在 index.html 中加了一个加载进度条

原来的项目是纯 CSR，因此首屏加载速度极慢，真实水平大概只能拿到 56 分

然而，我们 Version 2 的 Nuxt3 项目是 SSR 的，其 lighthouse 测试的满分是货真价实的，这会极大的影响网站的性能，尤其体现在首屏加载上

我们在前面的文档中，陆陆续续的介绍了 SSR 的好处，以及我们为什么使用 Nuxt 进行开发

更好的 SEO

由于搜索引擎能够直接获取完整的 HTML 页面内容，因此对于搜索引擎爬虫来说更易于索引，有利于网站的搜索排名。

更快的内容到达时间

用户在客户端接收到完整的 HTML 页面后，可以更快地看到页面内容，尤其是在低网络速度或高延迟的情况下

更好的首次加载性能

因为页面的初始渲染是在服务器端完成的，所以用户在浏览器中第一次加载页面时，可以直接看到完整的页面内容，而无需等待客户端 JavaScript 的下载和执行

我们觉得，对于论坛系统来说，这么做是值得的

不过，SSR 会给开发带来一定的困扰，幸运的是，大部分都可以被 Nuxt3 解决