SEO-critical pages are not client-side rendered only

Search engines index the HTML delivered by the server. A page that renders all content via client-side JavaScript sends search bots an empty <div id='root'> — the product description, pricing, and metadata are invisible until JavaScript executes, which Googlebot may not fully process or may process with a crawl budget delay. This directly harms organic search ranking for the pages most important to business discovery. Beyond SEO, client-side-only rendering means the user sees a blank page until JavaScript loads, parses, and executes — adding 1–4 seconds of blank white screen on slow connections. For SEO-critical pages, this is a dual failure: discoverability and user experience.

Convert SEO-critical pages from client-side useEffect data fetching to server-rendered async components. In Next.js App Router, server components are the default — move data fetching out of useEffect and into the component body with async/await.

// Before — CSR only, invisible to search engines
'use client'
export default function ProductPage({ params }) {
  const [product, setProduct] = useState(null)
  useEffect(() => {
    fetch(`/api/products/${params.id}`).then(r => r.json()).then(setProduct)
  }, [params.id])
  return product ? <ProductDetails product={product} /> : <Spinner />
}

// After — server-rendered, indexed by search engines
export default async function ProductPage({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`, {
    cache: 'force-cache'
  }).then(r => r.json())
  return <ProductDetails product={product} />
}

// Metadata also server-rendered
export async function generateMetadata({ params }) {
  const product = await fetchProduct(params.id)
  return {
    title: product.name,
    description: product.description,
    openGraph: { images: [product.imageUrl] }
  }
}