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"这个词的含义是“在形式和关系上对应或类似”，意思是两个实体虽然不相同，但具有相似的操作或对应的关系。换句话说，两种看起来不同的用法或语法，但最终的执行结果是相同的，例如，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 个：

更轻量: 针对现代浏览器、服务器部署和客户端打包，能够将体积最高减少 75 倍。

更快速: 通过 Nitro 提供的动态服务器端代码拆分来优化冷启动问题。

Hybrid: 动态的静态页面生成和其他高级模式现在都变得可能。

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 提供支持，它具有以下几个特点：

1、跨平台支持，支持 Node.js 与浏览器等。

2、Serverless 支持。

3、API 路由，使用 unjs/h3。

4、自动代码拆分 (code-splitting) 与异步加载 chunk (async-loaded chunks)。

5、混合渲染模式，供静态 (static) 与无服务器 (serverless) 网站。

6、开发服务器上的 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的默认渲染模式，它会在服务器环境中执行Vue程序代码并呈现HTML，不论页面是预先生成和缓存还是动态渲染。这类似于SSR，服务器会返回一个完整的HTML页面给浏览器。一旦完整的页面呈现在浏览器中，就会开始加载Vue程序代码以处理后续的动态页面和路由跳转，即转换为SPA并由客户端进行渲染。换句话说，Nuxt 3的Universal Rendering即指SSR + SPA。

混合渲染（Hybrid Rendering）

使用 Vue 开发单页应用时，我们通常会通过路由（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），可以有效分担在服务器端渲染时的资源负载，将其提升到另一个层次，从而减少网络延迟和成本。Nitro 不仅支持单页应用和静态网站的渲染，甚至在后端调用 API 时也能直接调用相关函数，从而降低 API 请求，整体来说是非常强大的服务器引擎。

Nuxt 3 的建構工具

Nuxt 3 的构建工具包括：

默认使用 Vite，也可以切换成 Webpack；

Rollup；

PostCSS；

esbuild。

Nuxt 3 已经帮我们配置好一堆设定啦，真的是开箱即用，而且 Nuxt 也支援 TypeScript。如果说真的要调整配置，也可以再 nuxt.config 中进行调整，非常方便贴心。

小结

花了一些篇幅简述 Nuxt 3 新功能特性及渲染模式，让在使用 Nuxt 3 之前能有个概念，了解所使用的框架及特性也能帮助你更快掌握它。

接下来将开始建立第一个 Nuxt 3 专案，在这个系列文章所使用与提及的 Vue 与 Nuxt，皆会以 Vue 3 及 Nuxt 3 作为解释说明与操作示范。