How to fix seo product content client rendered on Next.js (Headless)

Steps for Next.js (Headless)

1. Locate your product page component. In the App Router it lives at app/products/[slug]/page.tsx; in the Pages Router it lives at pages/products/[slug].tsx. Confirm the product description is currently fetched client-side (inside a useEffect, SWR call, or similar).
2. App Router: Convert the page to an async React Server Component (RSC) and fetch product data directly inside the component body using your commerce API/SDK. Remove any 'use client' directive from the page file itself. Pages Router: Replace any client-side fetch with getStaticProps (preferred for SSG) or getServerSideProps (for SSR), returning the product description as a prop.
3. Render the description directly in the JSX returned by the server component / page — e.g. <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} /> or a plain <p>{product.description}</p>. This guarantees the text is present in the initial HTML payload served to crawlers.
4. If rich/HTML descriptions are used, sanitize the markup server-side with a library such as `isomorphic-dompurify` before passing it to dangerouslySetInnerHTML, keeping XSS risk zero.
5. Add structured data (JSON-LD) for the product in the same server component using a <script type='application/ld+json'> tag so AI and social scrapers also get machine-readable content.
6. Verify the fix: run `curl -s https://your-domain.com/products/your-slug | grep -i 'description'` — the description text must appear in the raw HTML response, not be empty.

What is seo product content client rendered?

Modern ecommerce themes often load product descriptions, reviews, and images dynamically using JavaScript — meaning the page's raw HTML (the first file the server sends) arrives nearly empty, and your actual content only appears after a browser runs the JS code. This pattern is called "client-side rendering." Server-side rendering (SSR) is the opposite: the server sends back a fully built HTML page with all your content already written into it. When a crawler or bot visits your page, it reads that raw HTML file. If your content isn't there, the bot sees a blank product page — even if a human visitor with a browser sees everything perfectly.

Google's own documentation states it can take days or weeks before it revisits a page to render JavaScript — meaning your product descriptions may be invisible to Google's index for extended periods, costing you ranking and organic traffic. AI-powered search tools like ChatGPT Search (GPTBot), Claude (ClaudeBot), and Perplexity (PerplexityBot) fetch only raw HTML and never execute JavaScript at all, so a client-rendered product is completely invisible to these fast-growing traffic sources. Shoppers arriving from AI-generated answers or rich snippets convert at extremely high rates; losing that channel directly costs revenue. Social media preview cards (Open Graph) also rely on raw HTML, so your products will show blank or broken previews when shared on Facebook, Pinterest, or X, reducing click-through from social traffic too.

See the complete Seo product content client rendered guide for every platform and the full background.