NextJS中设置layout.jsx为'use client'会导致子页面失去SSR能力吗？

核心结论 #

把layout.jsx设为'use client'组件，不会导致子页面失去SSR能力，你的产品页面依然能被服务器端渲染，完全不影响SEO爬虫抓取产品信息。

具体原理 #

Next.js中客户端组件（声明'use client'）与服务器组件的嵌套规则是：客户端组件可以嵌套服务器组件，但服务器组件不能嵌套客户端组件。也就是说：

• 你的子页面如果没有主动声明'use client'，默认就是服务器组件，哪怕被客户端组件（layout）包裹，依然会在服务器端完成渲染，输出完整的HTML给爬虫。
• 只有当子页面自身加上'use client'，或子页面的所有子组件都是客户端组件时，才会转为客户端渲染。

更优的实现方案 #

其实你完全不需要把整个layout改成客户端组件，只需要把分类导航模块单独抽成一个小型的客户端组件即可：

1. 创建CategoryNav.jsx文件，顶部加上'use client'，在这个组件里使用hooks管理选中状态、添加边框样式。
2. 在原本的服务器端layout.jsx中引入这个CategoryNav组件。
   这样既满足了交互需求，又保留了整个layout和子页面的SSR能力，是更合理的拆分方式。

关键提醒 #

路由页面（你的3个产品子页面）是独立的渲染单元，只要它们本身没有声明'use client'，就不受父级layout是否为客户端组件的影响，始终保持SSR渲染。

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