11th November, 2024•📖 5 min read

Is "use client" Bad for SEO?

Israel MichaelIsrael Michael
Is "use client" Bad for SEO?

If you've been working with Next.js lately, you've probably seen the use client directive pop up in components. It's just one line at the top of a file, but it raises an important question: does it affect SEO?

Short answer: No. Client components don't hurt SEO. Let me explain why.

What use client actually does

In Next.js 13 and above, components are server components by default. When you add use client to a component, you're telling Next.js this component needs client-side features like:

  • State (useState, useEffect)
  • Event handlers
  • Browser-only APIs (like window or localStorage)
  • Animations or heavy interactivity

Here's the key thing: Client components are still pre-rendered on the server and included in the initial HTML. Search engines see them immediately, exactly the same as server components.

The difference is that client components are also bundled and sent to the browser for hydration—making them interactive.

Why people think use client hurts SEO (and why they're wrong)

There's a common misconception that client components aren't server-rendered. This isn't true.

Both server components and client components appear in the initial HTML that gets sent to the browser. From a crawler's perspective, there's no difference. Google sees the content immediately either way.

So putting an <h1>, product description, or blog content in a client component is totally fine for SEO. The content is there in the HTML from the start.

What actually matters for SEO

While use client itself doesn't hurt SEO, there are two things that DO matter:

1. Don't hide content behind interactivity

This is the real SEO risk. If content only appears after a user clicks a button, opens a tab, or submits a form, crawlers won't see it.

Crawlers load the page and run JavaScript, but they don't interact with it. They don't click buttons or switch tabs.

Bad for SEO:

  • Product details hidden behind a "Read More" button
  • Pricing shown only after selecting a tab
  • Content that requires form submission to view

Fine for SEO:

  • Interactive components that render content immediately
  • Client components with state that shows content on load
  • Animations that don't hide initial content

2. Be mindful of performance

Client components increase your JavaScript bundle size. If you're overusing use client across your entire app, you can end up with a bloated bundle that slows down your site.

Performance affects SEO indirectly through Core Web Vitals and page speed rankings. But this is a holistic concern about your app's architecture, not a per-component decision.

You shouldn't avoid putting an <h1> in a client component just because it's an <h1>. If that component needs interactivity, use use client. The performance cost comes from the component being in the bundle, not from what content it contains.

The actual decision tree

When deciding between server and client components, ask yourself:

Does this component need client-side features?

  • State management?
  • Event handlers?
  • Browser APIs?
  • Interactivity after page load?

Yes? → Use use client

No? → Keep it as a server component

That's it. It's about functionality, not SEO.

How to use use client correctly

DO use use client for:

  • Forms with validation
  • Interactive widgets
  • Modals and dialogs
  • Tabs (as long as content is visible on initial render)
  • Animations
  • Any component that needs state or browser APIs

DON'T worry about:

  • Whether the component contains an <h1> or important text
  • Search engine indexing—crawlers see client components just fine
  • Per-component performance decisions based on content type

DO worry about:

  • Hiding content behind clicks, tabs, or interactions
  • Overall bundle size if you're using use client everywhere
  • Whether you actually need client features or just defaulted to use client out of habit

The bottom line

use client doesn't hurt SEO. Both client and server components appear in the initial HTML that crawlers see.

The choice between them should be based on whether you need client-side features, not whether the content is important for SEO.

The real SEO concerns are:

  1. Hiding content behind interactivity that requires user action
  2. Overall app performance from excessive JavaScript bundles

Get those right, and you can use client components wherever you need them without worrying about SEO.

Next.jsWeb development