[Day 02] Nuxt 3 介绍（CSR赛车3）

前言

浅谈 CSR、SSR 与 SSG的文中有提到，采用 SSR SPA，将第一个画面透过 SSR 产生，其他就交给 CSR 来做处理，既能兼具 SEO 还能拥有 SPA 的使用者体验，不是很完美吗？没有错，但在没有任何框架辅助之下，同一个页面你可能就需要实作两次程序代码，也就是前后端各一次的渲染逻辑，这也就是相应的代价。在介绍 Nuxt 3 之前就稍微提一下 Isomorphic JavaScript 与 Universal JavaScript。

Isomorphic JavaScript 与 Universal JavaScript

Isomorphic JavaScript

随着 Node.js 的出现，让客户端浏览器之外的服务器也能执行 JavaScript 程序代码，使得 JavaScript 成为一种同构语言 (Isomorphic Language)。Isomorphic JavaScript 即称之为同样的 JavaScript 程序代码可以在客户端及服务器端运行；也就是说同一份 Code 除了能在前端浏览器也能在后端执行。

然而 Isomorphic JavaScript 与 Universal JavaScript 的名词存有一些争议与差异，如今，Isomorphic JavaScript 多以称相同的程序代码组件，可以在客户端与服务器端用来组装或渲染出页面的技术。

Universal JavaScript

Michael Jackson 的文章提到，Isomorphic 这个词的含义「corresponding or similar in form and relations」为两个实体不相同，但具有相似的操作或对应的关系，换句话说就是，两个看起来不一样的使用方法或语法，但最终的执行结果是一样的，例如 jQuery 或 Zepto 操作 DOM 的语法长的不大一样，但是最终也都是对应 JavaScript 的 document.querySelector 等方法。

所以说，为了描述相同的程序代码但能在不同环境中运行的名词，就有了 Universal JavaScript 一词，这个名字告诉人们 JavaScript 它不仅可以在服务器和浏览器上运行，还可以在本机设备和嵌入式架构上运行。

那么 Isomorphic JavaScript 和 Universal JavaScript 与我们又有什么关系呢？有的，因为 Nuxt 3 正是一个 Isomorphic JavaScript 框架，Nuxt 3 是目前你使用 Vue 3 在开发网站时，会需要采用 SSR 技术或优化 SEO 问题所可以使用的解决方案。

Nuxt 3

Nuxt 3 官方在 2022/11/16 正式发布稳定版本 Nuxt 3.0 stable。

Nuxt 3 官网的标语 The Intuitive Web Framework，Nuxt 3 将让你更直觉的体验混合渲染等新功能，让在使用 Vue 3 开发时变得更加简单！

Nuxt 3 的新特性

从 Nuxt 3 官网的提供讯息所列，简单说明一下 Nuxt 3 的新特性，共有下列 12 个：

Lighter: 更轻量，针对现在浏览器，服务器部署与客户端打包能减少最高 75 倍之多。
Faster: 更快速，通过 Nitro 提供支持的活动服务器端程序代码拆分来优化冷启动问题。
Hybird: 动态的静态页面生成和其他高级模式，现在这些都将成为可能。
Suspense: 在导航触发的前后，皆可以在任何组件中取得数据数据。
Composition API: 使用 Composition API 和 Nuxt 3 的 Composables 实现真正的程序代码可重用性。
Nuxt CLI: 全新的零依赖体验，帮助你轻松建立项目与模块整合。
Nuxt Dev Tools: 专属开发除错工具，提供更多的信息与快速修复，让工作更高效。
Nuxt Kit: 具备基于 TypeScript 和跨版本兼容性的全新模块开发。
webpack 5: 更快速的打包时间与打包出更小的体积，并且无需任何配置。
Vite: 使用 Vite 作为打包工具，体验闪电般快速的 HMR。
Vue 3: 完全支持 Vue 3。
TypeScript: 使用 TypeScript 与 ESM 构建而成，无需额外的配置步骤。

Nitro

Nuxt 3 由一个全新的服务器引擎 Nitro 提供支持，它具有以下几个特点：

跨平台支持，支持 Node.js 与浏览器等。
Serverless 支持。
API 路由，使用 unjs/h3。
自动程序代码拆分 (code-splitting) 与异步加载 chunk (async-loaded chunks)。
混合渲染模式，供静态 (static)与无服务器 (serverless) 网站。
开发服务器上的 HMR (hot module reloading)。

简单来说，Nitro 已经是 Nuxt 3 包含的全新服务器引擎，无需再进行配置。Nitro 除了支持 SPA、建立静态的网站，甚至能在后端打 API 时直接调用相关函数，从而降低 API Request，整体来说是非常强大的服务器引擎。

Nuxt 3 渲染模式

Nuxt 3 目前支持两种渲染模式，Client-side Only Rendering 与 Universal Rendering。之后将会推出更先近的渲染模式，混合渲染 (Hybrid Rendering) 与边缘渲染 (Edge-Side Rendering)。

Client-side Only Rendering

Nuxt 3 设定为该模式，如同单纯使用 Vue 3 建置出的 SPA，浏览器下载并加载完 Vue 程序代码后，渲染 HTML 的所有动作皆在客户端执行，也就是客户端渲染 CSR。

Universal Rendering

Universal Rendering 是 Nuxt 3 默认的渲染模式，在这个模式之下，无论页面是预先产生并缓存还是动态渲染，Nuxt 都会在服务器环境中执行 Vue 程序代码，并渲染 HTML，也就是如同 SSR，服务器会向浏览器返回一个完整呈现的 HTML 页面。当浏览器完整呈现的页面出现后，也会开始加载 Vue 程序代码，以因应后续的动态页面与路由跳转等，即转换为 SPA 开始由客户端进行渲染。也就是说 Nuxt 3 的 Universal Rendering 即是指 SSR SPA。

混合渲染 (Hybrid Rendering)

我们在使用 Vue 开发 SPA 网站时，通常是会设置路由 (Route) 让网页能够到达不同的页面再来请求数据，此为CSR。在使用 Nuxt 开发时能让能网站拥有 SSR SPA 的 Universal Rendering 渲染方式，除此之外，Nuxt 3 还提供了一种更先进的渲染模式——混合渲染 (Hybrid Rendering)，可以为每个路由设置不同的渲染与缓存的规则，让部分页面使用 CSR 在客户端进行渲染，另一部分使用 SSR 在服务器端进行渲染。

边缘渲染 (Edge-Side Rendering)

Nitro 为 Nuxt 3 提供支持的全新服务器端渲染引擎，它为 Node.js、Deno、Worker 等提供跨平台的支持，让 Nuxt 可以在 CDN Edge Workers 进行渲染，故称为边缘渲染 (Edge-Side Rendering)，能有效分担在服务器端渲染时的资源负荷，将其提升到另一个层次，从而减少网络等待时间及成本。

Nuxt 3 的建构工具

Nuxt 3 预设的建构工具如下：