I created two versions of a page - with & without 'use client' and here's what I observed

First up, link to the source code & running demos:

Repos : (with-use-client) and (no-use-client)

Running demos : Page with use-client components and with no use-client components

What I observed:

• Adding use client didn't switch off server-side rendering. Such components still rendered on server, so SEO remains intact.
• JS bundle grew from 157 kB to 215 kB, but increase came from added interactivity (filtering, sorting of products).
• Actual performance hit came from client-side data fetching (within useEffect). So, for components where SEO matters, this is the main pattern to avoid.

One Client Component limitation is that you can't directly use a Server Component inside a Client Component. Workaround to this is to pass Server Component as children or via props:

//////// page.tsx
import ProductCard from '@/components/ProductCard'
import FilterBar from '@/components/FilterBar'

export default async function HomePage() {
  const products = await fetchProducts()

  /* Homepage is a server component that passes another
  Server Component ProductCard to FilterBar as a prop */
  return (
    <FilterBar products={products} CardComponent={ProductCard} />
  );
}

//////// FilterBar.tsx
// Is a client component to enable filtering 
// of products via useState
'use client'
import { useState } from 'react'

export default function FilterBar({ products, CardComponent }: Props) {
  const [category, setCategory] = useState('all')
  const filtered = products
    .filter((p) => category === 'all' || p.category === category)
  return (
    <>{filtered.map((product) => (
      <CardComponent key={product.id} product={product} />
    ))
    }</>
  )
}


//////// ProductCard.tsx
// Is not a client component even though rendered through
// FilterBar because it is passed from a Server Component
export default function ProductCard({ product }: { product: Product }) {
  return (
    /* Code to display product card */
  )
}

More specifics around use client (eg - hydration cost, data fetching waterfall pattern) with code examples detailed in this is the blog post.