渲染页面的流程

[cfdxkk]

渲染页面的流程图

首屏 SSR 时：

sequenceDiagram
actor  User
participant Nuxt Client
participant Nuxt Server
participant API

User->>Nuxt Server: 携带 cookie 拉取首屏 SSR
rect rgba(191, 223, 255, 0.4)
note right of Nuxt Server: 路由中间件：服务端
Nuxt Server->>Nuxt Server: 检查 cookie 中是否有用户信息
alt 如果 cookie 中有用户信息
    Nuxt Server->>API: 通过用户信息请求用户设置
    activate API
    API-->>Nuxt Server: 返回用户设置
    deactivate API
    Nuxt Server->>Nuxt Server: 将用户设置存储到 Pinia
else 如果 cookie 中没有用户信息
    Nuxt Server->>Nuxt Server: 尽可能将 cookie 中残留的用户（离线）设置<br />存储到 Pinia
end
Nuxt Server->>Nuxt Server: 将 Pinia 中的用户设置添加到响应头的 set-cookie 中
end
Nuxt Server->>Nuxt Server: 在 Vue 模板中使用 Pinia 中<br />存储的用户设置渲染出正确的 DOM
Nuxt Server->>API: 使用 Pinia 中的个性设置请求其他资源
activate API
API-->>Nuxt Server: 返回请求资源
deactivate API
Nuxt Server-->>Nuxt Client: 将 DOM 和带有 set-cookie 响应<br />头的响应返回给客户端
Nuxt Client->>Nuxt Client: set-cookie 响应头更新客户端 cookie
Nuxt Client->>Nuxt Client: 水合阶段，使用静态脚本将 cookie 中<br />的用户设置添加到 DOM 根节点
Nuxt Client--)User: 呈现页面
rect rgba(191, 223, 255, 0.4)
note right of Nuxt Client: 路由中间件：客户端
opt SSR 时该步骤没有作用
    Nuxt Client->>Nuxt Client: 在路由中间件使用 useCookie 将 cookie 中<br />的用户设置添加到 Pinia
end
end
Nuxt Client--)User: 呈现页面

Loading

---

非 SSR 时

sequenceDiagram
actor  User
participant Nuxt Client
participant API

User->>Nuxt Client: 拉取下一路由页面资源
rect rgba(191, 223, 255, 0.4)
note right of Nuxt Client: 路由中间件：客户端
Nuxt Client->>Nuxt Client: 在路由中间件使用 useCookie 将 cookie 中<br />的用户设置添加到 Pinia
end
Nuxt Client->>API: 使用 Pinia 中的个性设置请求其他资源
activate API
API-->>Nuxt Client: 返回请求资源
deactivate API
Nuxt Client->>Nuxt Client: 使用静态脚本将 cookie 中<br />的用户设置添加到 DOM 根节点
Nuxt Client--)User: 呈现页面

Loading

---

用户登录时

sequenceDiagram
actor  User
participant Nuxt Client
participant API

User->>Nuxt Client: 发起登录请求
Nuxt Client->>API: 验证用户
activate API
API-->>Nuxt Client: 返回登录验证结果
deactivate API
alt 登录成功
    Nuxt Client->>API: 使用 Pinia 中的个性设置请求用户设置
    activate API
    API-->>Nuxt Client: 返回用户设置
    deactivate API
    Nuxt Client->>Nuxt Client: 将请求到的用户设置更新到 cookie 和 pinia 中
    Nuxt Client->>Nuxt Client: 使用静态脚本将 cookie 中<br />的用户设置添加到 DOM 根节点
    Nuxt Client->>API: 请求其他资源
    activate API
    API-->>Nuxt Client: 返回请求资源
    deactivate API
    Nuxt Client--)User: 呈现页面
else 登录失败
    Nuxt Client--)User: 提示登录失败
end

Loading

---

更新设置

sequenceDiagram
actor  User
participant Nuxt Client
participant API

User->>Nuxt Client: 更新设置
Nuxt Client->>API: 更新设置的请求
activate API
API-->>Nuxt Client: 更新设置的响应，包含 set-cookie
deactivate API
alt 更新的是全局样式
Nuxt Client->>Nuxt Client: 将用户设置添加到 DOM 根节点
else 更新的是组件样式
Nuxt Client->>Nuxt Client: 将用户设置更新到 Pinia 中
end
Nuxt Client--)User: 呈现页面

Loading

比较复杂，可能看不太懂，因为要解决三个问题：
① 用户即使没有登录也可以离线自定义样式并保留在当前设备上
② 已登录用户的自定义样式多设备同步（不要求即时同步）
③ （尽可能）无 FOUC

看不懂的话找时间开个会吧

[cfdxkk]

更新：
SSR 时的渲染逻辑

sequenceDiagram
actor  User
participant Nuxt Client
participant Nuxt Server
participant API

User->>Nuxt Server: 携带 cookie 拉取首屏 SSR
rect rgba(191, 223, 255, 0.4)
note right of Nuxt Server: 路由中间件：服务端
Nuxt Server->>Nuxt Server: 检查 cookie 中是否有用户信息
alt 如果 cookie 中有用户信息
    Nuxt Server->>API: 通过用户信息请求用户设置
    activate API
    API-->>Nuxt Server: 返回用户设置
    deactivate API
else 如果 cookie 中没有用户信息
    Nuxt Server->>Nuxt Server: 尽可能将 cookie 中残留的用户（离线）设置<br />存储到 Pinia
end
Nuxt Server->>Nuxt Server: 将用户设置添加到响应头的 set-cookie 中
end
Nuxt Server->>API: 请求其他资源
activate API
API-->>Nuxt Server: 返回请求资源
deactivate API
Nuxt Server-->>Nuxt Client: 将 DOM 和带有 set-cookie 响应<br />头的响应返回给客户端
Nuxt Client->>Nuxt Client: set-cookie 响应头更新客户端 cookie
Nuxt Client->>Nuxt Client: 水合阶段，使用静态脚本将 cookie 中<br />的用户设置添加到 DOM 根节点
Nuxt Client--)User: 呈现页面

Loading

[otomad]

看不懂思密达。