1 reply

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:

"use client";
import { useQuery } from "convex/react";
import { api } from "../../../../convex/_generated/api";

export default function ProductsPage() {
  const products = useQuery(api.products.getAllProducts);

  return products === undefined ? (
    <LoadingSkeleton />
  ) : (
    <ProductGrid products={products} />
  );
}

"use client";
import { useQuery } from "convex/react";
import { api } from "../../../../convex/_generated/api";

export default function ProductsPage() {
  const products = useQuery(api.products.getAllProducts);

  return products === undefined ? (
    <LoadingSkeleton />
  ) : (
    <ProductGrid products={products} />
  );
}

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?

Google can't index pages that use Convex useQuery — best pattern for SSR with Convex + Next.js?

Similar Threads