Nuxt3.js

一、Nuxt是什么？

1、概念

Nuxt3是基于Vue3发布的SSR框架，也是Vue全家桶系列的一员。

1. SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
2. SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。

2、Nuxt3支持的渲染机制

Nuxt3提供了几种不同的按需渲染机制:

1. CSR：Client Side
   Rendering：仅客户端渲染(CSR)：页面由JS在浏览器里动态生成：js通过ajax从后台取数据，动态生成DOM
2. SSR: server-side rendering通用渲染(SSR): 页面由服务端nodejs生成:
   nodejs将vue代码解析，一次性生成html返回给浏览器。带来的好处是搜索引擎优化(SEO)。
3. SSG: static site generation
4. ISR：Incremental Static Regeneration，vue不支持，但nuxt3支持，需要node提供
5. ESR: Edge Side Rendering，核心思想是，借助边缘计算的能力，将静态内容与动态内容以流式的方式，先后返回给用户。cdn 节点相比于 server，距离用户更近，有着更短的网络延时。在 cdn 节点上，将可缓存的页面静态部分，先快速返回给用户，同时在 cdn 节点上发起动态部分内容请求，并将生成的静态部分的缓存后，继续返回给用户。
6. SWR：stale-while-revalidate，一种由 HTTP RFC 5861(opens in a new tab) 推广的 HTTP 缓存失效策略。这种策略首先从缓存中返回数据（过期的），同时发送 fetch 请求（重新验证），最后得到最新数据。使用 SWR，组件将会不断地、自动获得最新数据流。UI 也会一直保持快速响应。
7. 混合渲染：不同的路由，不同的页面，采用不同的渲染机制。Hybrid Rendering 机制:

3、需要的环境

Nuxt3 需要在 Node.js 版本 v16.10.0 或以上运行，在终端输入以下命令可查看当前node版本号。
我当前版本18.18.2

二、搭建Nuxt3工程

npx nuxi init <project-name>

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "nuxt": "^3.8.0",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5"
  }
}

三、应用场景

Nuxt.js是一个非常强大的框架，但是并不是所有类型的网页都必须使用SSR技术。由于使用SSR需要服务端渲染每一个请求，对服务器资源要求高，尤其是高并发访问的情况，会大量占用服务端CPU资源。
如果开发企业网站、商品展示 、博客这类型的展示型网站，就需要使用搜索引擎喜欢的SSR应用。因为Vue开发的应用默认是单页应用（SPA应用），但如果你想针对于搜索优化，就需要使用Vue的SSR模式开发，而Nuxt3就是Vue的SSR开发的框架。