Next.js单页应用中使用'use client'等是否影响SEO？

先理清你困惑的SSR/CSR在App Router里的核心逻辑：

• 默认情况下，src/app/page.js是Server Component，会做服务端渲染（SSR）：页面的完整HTML在服务端生成后直接返回，搜索引擎爬虫能直接抓取到所有内容，对SEO非常友好。
• 当你加上'use client'指令后，组件会变成Client Component，但这不代表完全变成客户端渲染（CSR）——Next.js依然会在服务端渲染出该组件的初始静态HTML结构，之后再由客户端加载JS激活交互、动画等功能。

针对你的具体场景，逐个分析对SEO的影响：

• 'use client'指令：本身不会伤害SEO，只要核心内容不是仅靠客户端JS生成，爬虫依然能抓取到初始渲染的HTML内容。
• useState钩子：如果初始状态的内容是硬编码或服务端能拿到的值，这部分会被渲染到HTML里，爬虫能抓到；但如果状态是在客户端通过useState更新（比如点击按钮后改变的内容），这类交互性内容一般不是SEO核心，影响不大。
• useEffect钩子：如果用来处理Framer Motion的动画触发、页面交互逻辑，完全不影响SEO，因为这些逻辑不改变初始HTML的核心内容；但如果用useEffect异步加载页面核心文本、标题这类SEO关键信息，那这部分内容爬虫可能抓不到，就会影响SEO。
• Framer Motion动画：它的初始静态元素结构会被服务端渲染出来，爬虫能看到元素的位置、文本等核心内容；动画效果是客户端JS执行后才触发的，搜索引擎不会因为动画本身降低SEO评分，反而合理的动画能提升用户体验，间接帮助SEO。

总结 #

只要你的页面**核心SEO内容（比如页面标题、正文、关键信息）**是在服务端就能渲染出来的（哪怕组件是Client Component），那使用'use client'、Framer Motion、useState和useEffect都不会影响SEO。只有当核心内容必须依赖客户端JS执行才能生成时，才会对SEO产生负面影响。

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