Next.js 13客户端组件SEO优化咨询：联系页场景解决方案

不用纠结全页标记成客户端组件，Next.js 13的App Router本身就支持服务端组件和客户端组件混合渲染，直接拆分组件就能解决问题：

• 把app/contact/page.js保留为服务端组件（不要加'use client'），在这里放页面的核心SEO内容：比如页面标题、联系说明文本、静态联系方式，还有设置页面的meta标签（用Next.js的Metadata API）。这些内容会在服务端生成，搜索引擎爬虫能直接抓取到，完全不影响索引。
• 单独创建一个客户端组件来处理表单逻辑，比如app/contact/components/ContactForm.js，在这个文件顶部加上'use client'，然后在里面写表单代码，用useState管理输入状态、提交逻辑这些交互功能。
• 回到page.js里，直接导入并渲染这个ContactForm组件就行。

这样一来，整个页面的SEO关键内容是服务端渲染的，能被搜索引擎正常索引，而表单部分是客户端交互的，用户能正常填写提交，两者互不影响。

额外提醒：如果需要设置页面的title、description等meta信息，直接在page.js里用Next.js的Metadata API配置，比如：

export const metadata = {
  title: '联系我们 | 我的网站',
  description: '欢迎通过表单联系我们，我们会尽快回复您',
}

这些元数据会在服务端渲染时注入到页面头部，完全符合SEO需求。

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