Skip to content
目录

SSR 支持

SSR 下每个请求独立 pinia 实例,服务端序列化 pinia.state.value,客户端 hydrate 后接管,避免与别的请求或上一次导航共享状态。


1. 流程

mermaid
sequenceDiagram
  participant S as 服务端
  participant C as 客户端
  S->>S: createPinia + render
  S->>C: HTML + serializedState
  C->>C: createPinia + hydrate
  C->>C: 交互继续 patch

2. 关键点

说明
state: () => ({})每 store 独立初始对象
pinia.state.value序列化单一数据源
hydrate / Nuxt 自动合并服务端 state
仅客户端 APIonMountedimport.meta.client

3. Options store 的 hydrate 钩子

可对特定 store 定制水合逻辑(覆盖字段、忽略临时字段)。


4. 误区

误区后果
模块级单例 pinia 跨请求用户 A 看到用户 B 数据
水合前后 state 形状不一致警告 / 闪动
在 setup 顶层访问 windowSSR 报错

5. Nuxt

@pinia/nuxt 自动注入、序列化;优先用生态方案而非手写 hydrate。


6. 总结

SSR = 请求级 pinia + 序列化一棵树;与 Zustand SSR 的 snapshot 思想类似,实现栈不同。

MIT License.