一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

Nuxt3-学习之路 01， 理解 CSR-SSR

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的 乱七八糟 的 知识点。

介绍

我们知道 Vue3 发布后，学习 Vue3 的热潮 蜂拥而上。

在我们对 Vue3 足够了解后，也尝试通过 Vue3 开始做项目，之后尝试将 Vue2 中的项目升级到 Vue3 中，并从中添加 TS ，来对项目的规范做更进一步的约束。

那这里所说的 Nuxt3 就是基于 Vue3 来做的一款 混合开发框架

而我们主要用 Nuxt3 来做什么呢？来开发我们的 服务端渲染 也叫 SSR渲染。

这里说一下，既然有 服务端 SSR 渲染，就会有 客户端渲染 叫 CSR。这两者会有什么区别和联系呢？下面进行讲解。

CSR 与 SSR

客户端渲染 CSR 与 服务端渲染 SSR 的区别。

CSR

我们的 Vue3 项目，在使用 未安装任何 webpack 的插件 或者 vite 工具打包后，会生成一个 dist 文件夹目录，如下。里面放置着 index.html 以及压缩后的 css 和 js 图标。

我们也可以查看 index.html 文件中的 body 标签 内，仅仅只有一个标签 <div id="app"></div>。

• 这里有个知识点

  注意 页面的 script 标签上有个 crossorigin 属性，它的作用是什么？

我们都知道 Vue3 中是通过把 App.vue 这个页面组件，挂载到 id 为 app 的Dom节点上。

• 这里还有一个知识点就是：

  createApp() 这个函数方法里，为什么需要再复写 mount 方法。

这样，客户端渲染 CSR 的流程为：

• 我们通过 URL 请求访问网站时，服务端返回这个 index.html 文件

• 客户端浏览器会加载解析 html 文件

  • 发现 body 标签内仅仅只有一个 id 为 app 的标签。

  • 页面就会处于 白屏 状态

• 然后遇到 script 引用 js 文件，进行再次请求服务端，来获取 js 文件。

• 然后客户端再执行 js 文件代码，然后页面才会出现信息和相关的数据 进行展示渲染。

SSR

服务端渲染 SSR 的流程为：

• 我们还是通过 URL 请求访问网站时，服务端还是返回这个 index.html 文件

  • 但是此时我们的 index.html 里面的标签及数据的内容会经过 服务端 的 一个填充

  • 再发送给客户端浏览器

• 客户端接收这个 html 文件，进行解析。

  • 发现里面是 有内容的

  • 就会变相的，相当于减少 请求js文件 和 解析js文件 的一个流程（不代表不会进行这两个过程）

  • 减少白屏出现的一个时间

注意：这里讲述的 服务端渲染 SSR 的是一个概念，后续会通过 Nuxt3 来进行一步一步的实现。

总结

SSR 的优势，就是将 本应该 CSR 处理的渲染，交给自己来处理。

• 优点：

  • 用户在请求时，会减少页面白屏存在的一个时间，如果此时再加上缓存，懒加载，CDN等其它优化手段，就会做到秒开。

  • SEO 友好

• 缺点：

  • 服务端的压力会增加

  • 学习成本会高些（如果是大神，这就另谈）