How to handle SEO for client components in Next.js 13?

Question

I'm confused on how to manage SEO for client components in Next.js 13.

Let's say I want to create a contact us page at /contact

In the new framework, I should create a folder named contact inside the app directory. And in it I should create a page called page.js by convention.

Now I need to create a form, which of course needs to manage its state. Thus I should use useState or other hooks from react.

But when I do that, Next.js compiler complains that it's a server component and if I want to use it on the client-side, I should mark it with 'use client' directive at the top.

But I don't want the component to be rendered on the client-side. I need my /contact page to be indexed by search engines.

What should I do?

Answer 1

use client does not mean that your component will be rendered on client only.

It works as previous versions of Next.js.

It will be rendered on server and hydrated on client.