docs: SSR note update

docs/note/SSR.md

@@ -255,7 +255,7 @@ Nuxt为我们扩展了Node的process对象，并为我们在浏览器环境提
 
 ### 页面与组件 View and Component
 
-Nuxt会自动为我们：注册组件、注册页面路由，*约定>规范*
+Nuxt会自动为我们：注册组件、注册页面路由，*约定>配置*
 
 - 位于`pages/`下的页面都会被注册路由
   - 路由使用内置组件NuxtPage占位，相当于router-view
@@ -279,3 +279,64 @@ Nuxt3 框架提供了一些内置的组件，常用的如下：
     - 类似于Vue3新增的内置组件Suspence
     - 可以为其传入具名插槽#fallback展示组件被渲染前的加载中状态
 - ServerOnly：该组件包裹的内容只会在服务端渲染
+
+### 创建页面
+
+文件目录即路由，，可以手动创建 也可以通过命令行快速创建页面
+
+- `npx nuxi pages category/index`: 创建`pages/category/index.vue`
+- `npx nuxi pages home/index`: 创建`pages/home/index.vue`
+- `npx nuxi pages detail/[id]`: 创建`pages/detail/[id].vue` 动态路由
+
+- 页面路由
+  - 页面水合之后，页面导航会通过前端路由来实现，可以防止整页刷新
+  - 当然，手动输入URL之后，点击刷新浏览器也可以导航，但这会导致整页刷新
+
+#### 路由中间件
+
+Nuxt提供了一个可定制的路由中间件，用来**监听路由的导航**，包括：局部和全局监听
+- 匿名中间件
+  - **在页面中**，通过`definePageMeta`定义
+  - 可以监听局部路由，当注册多个中间件时，会按照注册顺序执行
+  - 首次访问会在双端执行，后续都**只会在客户端执行**
+- 命名路由中间件
+  - 在`middleware`目录下定义，会自动加载中间件
+  - 首次访问会在双端执行，后续都**只会在客户端执行**
+- 全局路由中间件
+  - 在`middleware`目录中，需要带`.global`后缀的文件，每次路由更改会自动运行
+  - 与前两者不同，**每次页面切换，双端都会执行全局中间件**
+
+#### 路由验证 Validate
+
+Nuxt支持对每个页面路由进行验证，可以通过`definePageMeta`中的`validate`数学对路由进行验证
+- validate属性接收一个回调函数，回调函数以`route`作为参数
+  - 此回调返回一个布尔值，来决定是否放行路由
+    - `false` 拦截路由 默认重定向到404页面
+    - `true` 放行路由 正常跳转
+  - 返回一个对象
+    - `{ statusCode: 401 }` 返回自定义的 401 页面 验证失败
+- 可以自定义错误页面
+  - 在项目根目录 新建`error.vue`
+
+### 页面布局 Layout
+
+Layout布局是页面的包装器，可以将多个页面共性的东西抽取到Layout布局中
+
+例如：每个页面的页眉和页脚，这些具有共性的组件，我们可以写到一个Layout布局中
+
+本质上是Vue3的`<slot>`组件
+- 默认布局，创建`layouts/default.vue`
+  - 然后在`app.vue`中通过内置组件`<NuxtLayout>`使用
+- 自定义布局
+  - 创建`layouts/custom-layout.vue`
+  - 然后在`app.vue`中，为`<NuxtLayout>`传入`name`属性（具名插槽）
+
+### 渲染模式
+
+浏览器和服务器都可以解释JavaScript代码，都可以将Vue.js组件呈现为HTML元素，此过程称为渲染
+- 在客户端渲染组件为HTML元素的过程，称为客户端渲染
+- 在服务端完成这个此操作的过程，称为服务端渲染
+
+而Nuxt3支持多种渲染模式
+- 之前在配置文件中提到的`ssr`选项，可以选择以SSR模式渲染，还是CSR方式渲染
+- 混合渲染模式（SSR | CSR | SSG | SWR）：需要在 `routeRules` 根据每个路由动态配置渲染模式