Next.js中`use client`指令对组件子元素的影响咨询

核心结论 #

AnimatedElement内部的子元素会受其"use client"指令的影响，整个子组件树都会被标记为客户端组件。

具体说明 #

1. 组件渲染机制
   在Next.js的App Router中，只要某个组件声明了"use client"，它包含的所有子元素、子组件都会被归类为客户端组件，后续的交互逻辑只能在浏览器环境中完成渲染。不过父页面作为服务端组件，依然可以正常引入这个客户端组件，两者的嵌套完全符合规则。

2. 对SEO的影响

   • 静态内容抓取不受影响：Next.js的客户端组件在构建或首次请求时，会先在服务端生成初始静态HTML，搜索引擎爬虫可以正常抓取到<h2>、<p>里的文本内容，以及<Image>的静态资源信息。
   • 仅动态内容存在抓取风险：只有当子元素依赖客户端动态状态（比如需要JS执行后才生成的内容）时，爬虫才无法抓取这部分内容，但你的代码里的内容都是静态的（homepage.formations应为服务端获取的静态数据），所以SEO不会受影响。

内容的提问来源于stack exchange，提问作者oussamaZAAM