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
仅客户端 API放 onMounted 或 import.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.