Next.js对比CRA的SEO优势及站内链接SEO优化疑问

Hey there! Great question—this is such a common point of confusion when moving from Create React App (CRA) to Next.js, so let’s break it down clearly.

First, Let’s Correct a Key Misconception #

Your assumption that "only the first request is server-rendered, and subsequent requests are client-side rendered with no SEO difference from CRA" isn’t fully accurate. Here’s why:

Next.js’s Client Navigation vs. CRA’s SPA Navigation #

When you use next/link for internal navigation (the recommended way in Next.js), two critical things happen that benefit SEO:

1. Crawlers see standard <a> tags: Under the hood, next/link renders a regular <a> tag with the correct href attribute. Even if a crawler doesn’t execute JavaScript (though modern crawlers like Google’s do execute JS), it can still follow these links directly to the target page—and that target page will already be pre-rendered (via SSG, ISR, or SSR) with full HTML content.
2. Pre-rendered pages are ready for crawlers: Unlike CRA, where every page relies on client-side JS to render content, Next.js lets you pre-render all your pages (statically or on-demand). So when a crawler follows a link to a new page, it doesn’t get an empty shell—it gets a fully populated HTML page immediately, just like the first request.

Why Next.js Is More SEO-Friendly Than CRA #

Let’s boil down the core advantages:

• No empty initial HTML: CRA serves a blank HTML file with a root div, and all content is injected via JS. While Google can render JS, there’s still a risk of delays or incomplete rendering (especially for complex apps). Next.js serves fully rendered HTML for every pre-rendered page on first load (even for deep links).
• Flexible pre-rendering strategies:
  • Static Site Generation (SSG): Builds static HTML for pages at deploy time—crawlers get instant, complete content every time.
  • Incremental Static Regeneration (ISR): Updates static pages after deploy without rebuilding the entire site—perfect for dynamic content that needs to stay fresh.
  • Server-Side Rendering (SSR): Renders pages on each request, so even real-time dynamic content is sent as full HTML to crawlers.
• Built-in routing that works for crawlers: Next.js’s file-system routing ensures every page has a unique URL, and next/link ensures crawlers can discover all pages via standard anchor tags. CRA requires extra configuration (like setting up a catch-all route on your server) to avoid 404s when crawlers access deep links directly.

How to Set Up Internal Links for Optimal SEO #

Follow these best practices to make sure crawlers can navigate your Next.js site seamlessly:

• Always use next/link for internal navigation:

  import Link from 'next/link';
  
  // Good
  <Link href="/blog/post-1">Read Post 1</Link>
  
  // Bad (avoids client-side navigation and crawler-friendly links)
  <button onClick={() => window.location.href='/blog/post-1'}>Read Post 1</button>
  

  next/link preserves client-side navigation speed while keeping crawler-friendly <a> tags intact.

• Ensure all pages are pre-rendered:

  • For static content, use getStaticProps (Pages Router) or Server Components with static metadata (App Router).
  • For dynamic content that updates often, use ISR (App Router: add the revalidate option in generateStaticParams).
  • For real-time content, use SSR (App Router: Server Components with dynamic data fetching).

• Configure your server correctly:

  • If self-hosting, make sure your server routes all requests to Next.js’s entry file (e.g., run next start or point your server to the built output). This ensures crawlers accessing deep links (like /blog/post-1) get the pre-rendered HTML instead of a 404.
  • If using platforms like Vercel, this is handled automatically.

• Add unique SEO metadata per page:

  • Use next/head (Pages Router) or the metadata object (App Router) to set unique titles, descriptions, and other meta tags for each page. This helps crawlers understand the content of each page and improves rankings.

• Avoid hiding content behind JS-only interactions:

  • Don’t rely on client-side state to render critical content (e.g., blog post text). Make sure core content is part of the pre-rendered HTML.

Final Takeaway #

Next.js’s SEO advantage isn’t just about the first request—it’s about ensuring every page (whether accessed directly or via internal links) serves fully rendered HTML to crawlers. CRA’s SPA model forces crawlers to execute JS to see content, which introduces uncertainty. By using next/link and choosing the right pre-rendering strategy, you’ll make your site as crawler-friendly as possible.

内容的提问来源于stack exchange，提问作者Shahin Ghasemi