1. From Invisible to Indexed: Transitioning an E-commerce PLP from CSR to SSR
2. SEO for Next.js: How We Fixed Product Crawlability on a Large Scale Storefront
3. The Hidden SEO Killer: Why Client-Side Hydration Guards are Hurting Your Rankings
Introduction
In the world of E-commerce, if Google can't see your products in the initial HTML, they don't exist. We recently tackled a significant challenge on a major storefront where the Product Listing Pages (PLP) were invisible to search engine bots due to a purely client-side architecture. This post breaks down how we moved to a Server-Side Rendered (SSR) model to boost discoverability.
The Problem: The "Hydration Guard" Trap
Many modern React/Next.js apps use a pattern where components wait for the page to "hydrate" before rendering. While this prevents layout shifts, it leaves the initial HTML empty.
Symptom: view-source showed 0 product links.
Impact: Crucial Product Detail Page (PDP) links were missing from the search engine's initial pass.
The Solution: A Technical Deep Dive
1. Removing Hydration Blocks
The first step was identifying and removing synchronous guards like if (!isClient) return null. We updated the
ProductCard
to render its skeletal structure and crawlable links immediately on the server.
2. Solving the Klevu API SSR Mismatch
Fetching products on the server (SSR) is different from the browser. We had to.
Map Category Paths: Aligning Strapi's category data with Klevu’s search engine requirements.
Clean the Input: Handling case-sensitivity and special characters (like &) that caused the server-side API call to return zero results.
Search Type Logic: Switching from specific term searches to CATNAV (Category Navigation) with wildcard queries to ensure the entire catalog is discoverable by bots.
3. Crawlable Pagination & Navigation
Semantic Links: We replaced "Load More" buttons with tags. Users still get the fast JS experience, but bots now have a clear path to page 2 and beyond.
Category Tree: We injected a top-level category navigation component into the SSR HTML, creating 10+ high-value internal links on every PLP.
Verification: Thinking Like a Bot
To test this, we stopped relying on the browser console. We used:
curl audits:
Checking the raw HTML for product-card classes and valid href links.
Bot Simulation: Tools that fetch the page without executing a single line of JavaScript.
Environment Parity: Ensuring API keys and environment variables were correctly loaded in the Node.js server context.
Conclusion
SSR isn't just a performance feature; it's an SEO requirement. By ensuring your product grid, breadcrumbs, and navigation are present in the first byte, you give search engines the "map" they need to index your site effectively.
Top comments (1)
Solid breakdown. I hit this exact issue once—everything looked fine in browser but Google saw nothing. Moving PLP to SSR + proper links made a huge difference in indexing within days. The “view-source check” tip is gold 👍