Google can't index pages that use Convex useQuery — best pattern for SSR with Convex + Next.js?
❔Advice
I'm running into Google indexing issues on my public-facing pages that fetch data via useQuery from convex/react. Since useQuery is client-side only, Googlebot sees the loading/skeleton state instead of the actual content.
Stack:
Next.js 16.1.6 (App Router) + TypeScript
Convex 1.31.7
Clerk 6.37.3
Vercel hosting
Node 20.18.3
The problem: My products page is a "use client" component that relies on useQuery to fetch product data:
When I run a URL inspection in Google Search Console, the page returns 200 OK and no JS console errors, but the rendered HTML only contains the skeleton/loading state — not the actual product data. This means Google isn't indexing the product content.
What I'm looking for: What's the recommended pattern for server-side rendering Convex data in Next.js App Router so that Googlebot (and the initial HTML response) includes the actual content? Is fetchQuery from convex/nextjs the right approach here, and are there any gotchas when combining it with ConvexProviderWithClerk?
Stack:
Next.js 16.1.6 (App Router) + TypeScript
Convex 1.31.7
Clerk 6.37.3
Vercel hosting
Node 20.18.3
The problem: My products page is a "use client" component that relies on useQuery to fetch product data:
When I run a URL inspection in Google Search Console, the page returns 200 OK and no JS console errors, but the rendered HTML only contains the skeleton/loading state — not the actual product data. This means Google isn't indexing the product content.
What I'm looking for: What's the recommended pattern for server-side rendering Convex data in Next.js App Router so that Googlebot (and the initial HTML response) includes the actual content? Is fetchQuery from convex/nextjs the right approach here, and are there any gotchas when combining it with ConvexProviderWithClerk?
