hen明显，CSR 和 SSR 是两种不同的取舍，没有谁一定geng好，咱们得根据业务场景来选，不要一刀切。

还有个事，昨天听朋友说他网恋成功了说是在Soul上找的对象，Yi经线下面基过。唉，这年头...这也Neng成功？ 你们说小编要不要也去试试？

好了回到正题，今天要来分享的是小编上周工作中排查的一个问题，其实也是比较基础的概念问题，只是小编太久没用了这次也写出来记录一下请诸君按需食用哈~

Zui近小编正在Zuo一个 SSR 项目，作为一名 Vue 老玩家，自然就选择 Nuxt 来搞，上次用 Nuxt 还是在上次时间略久了！

整体项目开发进展还算顺利，也就是部署稍微麻烦一丢丢。然而这天测试同学给我提了个问题："页面加载出来后有时按钮点了没啥反应，总要多点几次或者要等一会才Neng点。"

小编一开始也按常规思路来：先kan控制台有没有报错 —— 结果没有明显的红字错误。于是怀疑是事件没绑好或者代码写错了又查了一圈事件和逻辑，代码确实没问题！

Zui后才反应过来：原来是 水合 还没完成，那部分组件还没绑上事件，所以有时候才Neng点。

简单说：服务端先返回 HTML，客户端 JS 加载完后把事件绑上去，让页面Neng点、Neng交互——这个过程就叫水合。

懒加载水合它还是「水合」——还是把事件绑到服务端 HTML 上，只是不再一次性水合整页，而是按需、分优先级地水合。如首屏先水合，下面的等需要时再水合。

在 Vue / Nuxt 里这个策略常和 异步组件 一起用：异步组件负责延迟加载组件 JS，懒加载水合负责延迟该组件的水合时机，两个搭配着用。

Nuxt Yi经内置了懒加载水合的支持，用起来非常简单的！在 Nuxt 中，所有放在 components/ 目录下的组件dou会被自动导入。Ru果在组件名前加上 Lazy 前缀，就Ke以延迟加载：

import { defineAsyncComponent, hydrateOnVisible } from 'vue' const LazyComments = defineAsyncComponent({ loader: => import, hydrate: hydrateOnVisible }) 可用的水合策略有哪些？

用法dou差不多，小编就不一一列举了大家kan文档就好~

测试反馈按钮点不了小编的解决方案是这样的：

这样首屏的 JS 体积就小了水 合速度变快 ，按钮响应geng及时 ！🎉 希望本文对你有所帮助，如有任何疑问 ，期待你的留言哦 。 老样子，点赞 + 评论 = 你会 了 ，收藏 = 你精通 了 。🎯

至此，本篇文章就写完啦 ，撒花撒花。