Next.js SEO + AEO Audit: SSR vs CSR, Schema, AI-Crawlability

The short answer

Next.js can produce the best or the worst possible result for AI search, depending on how you render. Server-side rendering and static generation ship real HTML that GPTBot and ClaudeBot read on the first request. A client-side-rendered SPA ships an empty <div id="root"> and those crawlers index nothing. A Next.js audit is really a rendering audit first, then schema.

The one thing that decides everything: rendering

Here's the uncomfortable truth for React developers in 2026. Google has rendered JavaScript reliably for years, so Googlebot may eventually index your CSR app. AI crawlers will not. GPTBot, PerplexityBot, ClaudeBot, and anthropic-ai do not execute JavaScript — they send one HTTP request, take whatever HTML comes back, and move on. (GEORaiser)

If your initial HTML is just <div id="root"></div>, AI crawlers index nothing, and anything fetched in a Client Component via useEffect is invisible to them. (getpassionfruit) You can rank fine in Google and still be completely absent from ChatGPT Search, Perplexity, and Claude. That's the trap: your analytics look healthy while your AEO visibility is zero.

The 2026 recommendation is unambiguous: SSG as the default, SSR where content is dynamic, and CSR reserved for interactive widgets nested inside a server-rendered page. (stallioncognitive) Keep main content in Server Components, render it from data fetched on the server, and reserve useEffect for genuine interactivity. (agentmarkup)

Practice what you preach

We'll say the quiet part out loud: SEO AEO Specialist's own marketing site is a client-side-rendered SPA, and it fails its own audit. When we run SEO AEO Specialist against SEO AEO Specialist, the initial HTML is a near-empty shell — an AI crawler visiting our homepage gets almost no content. We're rebuilding it on SSR, and we're telling you this because it's the single most common mistake we see in Next.js and React projects. If a tool that audits AEO can ship a CSR shell by accident, so can you. The fix is the same for us as for you.

Where Next.js gaps hide beyond rendering

Schema drift. Next.js gives you clean tools — a <script type="application/ld+json"> in your page.js or layout.js, derived from your data at render time. (Next.js JSON-LD guide) The classic mistake is treating structured data as a separate editing surface, so it drifts out of sync with the page. Derive it from the same data that renders the content.

Metadata done manually. The App Router's generateMetadata function handles titles, descriptions, canonicals, and OG tags with deduplication and inheritance. (Next.js generateMetadata) Teams that skip it end up with blank or duplicated metadata across dynamic routes.

Over-engineered AI files. Add llms.txt for discovery — a markdown index of your priority pages. But don't generate per-page .md versions: Google says you don't need them and Bing warns they double your crawl load. (agentmarkup)

The fixes that matter

1. View-source every key route. If main content isn't in the raw HTML, it's CSR — convert to SSR/SSG.

2. Move content-bearing components out of useEffect and into Server Components.

3. Export generateMetadata on every dynamic route for titles, descriptions, and canonicals.

4. Inject JSON-LD (Organization, Article, FAQPage, BreadcrumbList) derived from render-time data.

5. Ship a sitemap.xml with real lastmod dates.

6. Add llms.txt — but skip per-page .md URLs.

7. Confirm robots.txt allows the AI crawlers you want.

Next.js SEO + AEO checklist

FAQ