Direct answer

Google can render JavaScript, but rendering is a separate, resource-dependent stage and other crawlers vary. Critical content, links, status, canonicals, and metadata are more reliable when present in server-rendered HTML.

Next.js App Router supports static generation, Server Components, route metadata, sitemaps, and JSON-LD. Use client components only where interaction requires them.

Practical steps

  1. Render indexable content and descriptive anchors on the server.
  2. Return meaningful status codes and create metadata from the typed manifest.
  3. Keep each tool's client bundle isolated to its route and set explicit performance budgets.
  4. Test HTML with JavaScript disabled and inspect rendered output for hydration differences.

Example

A guide is a Server Component with no client JavaScript. Its calculator is loaded only on the calculator route, while the method and limitations remain in the initial HTML.

Common mistakes

  • Saying JavaScript cannot be indexed.
  • Depending on client code to remove an initial noindex.
  • Shipping every interactive tool in the global bundle.

Limitations

  • Server rendering does not guarantee indexing or quality.
  • Framework features and crawler behavior change; verify against current primary documentation.

Primary sources

Continue learning