Nuxt4 笔记

By | 2025年11月14日

中文教程:https://nuxt.com.cn/docs/4.x/getting-started/introduction

水合(Hydration)

一句话概括:水合 = “让服务端渲染的静态 HTML 在浏览器里‘活过来’、变成可交互的 Vue 应用”

水合是 Nuxt/Vue 在 SSR 应用中把服务端渲染出的静态 HTML“激活”为可交互的动态应用的过程:服务端先执行组件逻辑、加载数据,生成完整的 HTML 和初始状态(序列化到 __NUXT__ 中)发给浏览器;浏览器加载后,Vue 不重新渲染整个页面,而是复用已有的 DOM 结构,只把事件监听、响应式状态、Pinia store 等“绑定”上去。而 pinia-plugin-persistedstate 就是在水合完成后,自动从 localStorage 读取数据,覆盖服务端初始的 null,实现刷新后状态不丢失。

pinia-plugin-persistedstate 支持 localStorage 和 Cookie 两种模式,若是移动端优先的项目,个人推荐用 localStorage 来保存登录信息,刷新页面不会丢失,因为插件会在水合后自动恢复。虽然SSR服务端不支持 localStorage,state.user = null,但客户端会从 localStorage 强行恢复。加了这个插件后,stores 里不再需要手动操作 localStorage。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注