How Googlebot Actually Sees Your Next.js Store

Most developers assume that because Next.js does server-side rendering, Googlebot sees the full page. Sometimes that's true. Often it's not, and the distinction comes down to how your data fetching is set up.

When Googlebot visits a Next.js store

Let's say your product page fetches product data from a CMS or Shopify API in a useEffect hook. That runs in the browser after React hydrates. Googlebot doesn't wait for it. The initial HTML response has the page structure but the product content is empty — and that's what gets indexed.

Even with the App Router and React Server Components, it's easy to accidentally fetch data client-side by adding "use client" to a component that makes API calls. Many teams don't realize the product card fetching its data in a client component means Googlebot never sees that data.

Use the bot view tool to check your store:

Common patterns to look for

• SPA flag is "Yes": your page has a div#root or div#__next and almost no content. Client-side rendering.
• Word count under 100: some structure is server-side but the main content is missing. Data fetching is client-side.
• Title is generic (like "Store"): the <title> is set by JavaScript after load, not in the initial HTML.

Fixing client-side data fetching

The cleanest fix in the Next.js App Router is moving data fetching to async server components. Instead of fetching in a useEffect, fetch in the server component and pass data down as props. The rendered HTML will contain the content.

If refactoring isn't immediately feasible, pre-rendering via PerfectSearch gets you the same result without touching your application code. Bots get rendered snapshots, humans get the original app.