下栽地止：
https://lexuecode.com/4477.html
Nuxt3开发网站服务端渲染
Nuxt3是基于Vue3发布的SSR框架，也是Vue全家桶系列的一员。如果你了解Nuxt2，应该也了解Nuxt3的使命和用途。但是如果你不了解，你需要先知道两个概念。
- SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
- SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。
所以如果你开发的应用是企业网站、商品展示 、博客这类型的展示型网站，就需要使用搜索引擎喜欢的SSR应用。当我们明白这两个概念后，再来看Nuxt3的使命。因为Vue开发的应用默认是单页应用（SPA应用），但如果你想针对于搜索优化，就需要使用Vue的SSR模式开发，而Nuxt3就是Vue的SSR开发的框架。
Vue3+Nuxt3打造SSR网站应用，0到1实现服务端渲染 - 实战
讲 Vue 的基础，当然得先从实例说起。要怎么理解实例两个字？在 Vue 里，可以理解为每一个通过用 Vue 函数创建的，都是一个 Vue 实例：
// new Vue返回一个Vue实例
var vm = new Vue({
// 选项
});
Vue 实例和 Vue 应用是什么关系呢？官方介绍：一个 Vue 应用由一个通过new Vue()创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。所以 Vue 实例是属于 Vue 应用的一部分，与组件树组成了 Vue 应用：
// 一个Vue应用，由根实例+组件树组成
根实例
└─ 根组件 // 此行开始，为组件树
├─ 组件1
│ ├─ 组件1-1
│ └─ 组件1-2
└─ 组件2
├─ 组件2-1
└─ 组件2-2
那组件又是什么呢？关于组件的介绍和使用，会在下一章介绍。
#3.1.1 生命周期钩子
生命周期要怎么理解呢？结合前言中浏览器页面渲染的机制，以及《第1章 Vue 框架介绍》中 Vue 模板的解析和渲染的过程，我们知道在 Vue 中要渲染一块页面内容的时候，会有这么几个过程：
（1) 解析语法生成 AST。
（2) 根据 AST 结果，完成 data 数据初始化。
（3) 根据 AST 结果和 data 数据绑定情况，生成虚拟 DOM。
（4) 将虚拟 DOM 生成真正的 DOM 插入到页面中，此时页面会被渲染。
当我们绑定的数据进行更新的时候，又会产生以下这些过程：
(5) 框架接收到数据变更的事件，根据数据生成新的虚拟 DOM 树。比较新旧两棵虚拟 DOM 树，得到差异。
(6) 把差异应用到真正的 DOM 树上，即根据差异来更新页面内容。
当我们清空页面内容时，还有：
(7) 注销实例，清空页面内容，移除绑定事件、监听器等。
所以在整个页面或是某块页面内容（组件）中，Vue 提供了以下的一些关键的生命周期钩子：
