如何在 Next.js 13 中处理客户端组件的 SEO？

Question

我对如何在 Next.js 13 中管理客户端组件的 SEO 感到困惑。

假设我想创建一个联系我们页面：/contact

在新框架中，我应该在目录contact中创建一个名为的文件夹app。我应该在其中创建一个page.js按惯例调用的页面。

现在我需要创建一个表单，它当然需要管理其状态。因此我应该使用useStateReact 或其他钩子。

但是当我这样做时，Next.js 编译器会抱怨它是一个服务器组件，如果我想在客户端使用它，我应该'use client'在顶部用指令标记它。

但我不希望组件在客户端呈现。我需要我的/contact页面被搜索引擎索引。

我应该怎么办？

Answer 1

use client并不意味着您的组件将仅在客户端上呈现。

它与 Next.js 的早期版本一样工作。

它将在服务器上渲染并在客户端上进行水化。

Answer 2

您不能在服务器组件上使用挂钩。服务器组件在服务器端呈现，因此不能像客户端组件那样保存状态。尝试将表单移动到新的客户端组件中，然后从/contact-page渲染它

页面.js

const ContactPage = () => {
  // set your SEO headers etc here
  return (
    <CustomForm />
  )
}

自定义表单.jsx

'use client'
const CustomForm = () => {
  // Handle your state and form rendering in this component
}