课程收官

现代应用流行的渲染模式：

• CSR：客户端渲染
• SSR：服务端渲染

SSR 核心概念：

1. 代码会执行两次，服务器端执行一次，客户端执行一次，在 SSR 的过程中，应用仅仅是一次性生成 HTML 字符串，随后发送给浏览器；这期间根本没有用户交互，也没有实际的 DOM 更新操作。
2. 由于代码在服务器端会执行，而服务器代码会面临来自多个客户端的请求，因此以前在客户端直接生产 Vue、Router 实例的方式得改造为一个工厂函数，每个请求都会得到一个全新的 Vue、Router 实例。
3. 水合操作：所谓水合操作，就是服务器端返回给客户端的 html 重新被激活，变成一个单页应用的过程。水合的时候最常见的错误就是水合不匹配（Hydration mismatch），其原因是因为服务器端生成的 html 结构和客户端生成的 html 结构不匹配造成的。另外和水合相关的两个词：
   1. 脱水：是指在服务器端渲染的过程中，将渲染时使用的关键状态和数据提取出来，并以一种可序列化的形式嵌入到 HTML 中，发送给客户端。这样客户端在加载时可以直接使用这些数据，而不需要再次请求服务器。
   2. 注水：是指在客户端接管服务器渲染的页面时，将脱水的状态重新加载到客户端应用中，并使得客户端的 JavaScript 逻辑接管页面上的交互和功能。通过注水，客户端可以避免重复请求数据，实现无缝的客户端功能接管。

Nuxt：全栈上层框架

• 全栈：不仅仅是客户端开发，还包含中间服务器的开发
• 上层：开箱即用

各阵营都有全栈上层框架：

• Vue：Nuxt.js
• React：Next.js
• Angular：Angular Universal
• Svelte：SvelteKit
• …

Nuxt 里面，主要就是一些核心特性：

• 文件路由：其实不仅仅是路由这一块儿的自动化处理，其他很多目录都会有自动化处理，例如 components、composables 等
• 模块：很多第三方库都是以模块的形式和 Nuxt 结合的。所以当你要使用某个第三方库的时候，建议是先去模块市场找一找，看是否已有现成的模块，使用模块往往比你使用原生的库有更多的特性，和 Nuxt 更好的结合性。
• 渲染模式：这种上层框架一般都是提供多种渲染模式的，一般默认是 SSR 模式，除此之外也能使用 CSR 的模式甚至是混合模式。

-EOF-