Next.js y React para la IA: hacer visibles los frameworks de JavaScript a los rastreadores de IA
React, Next.js y frameworks similares son excelentes, pero pueden producir una página que se ve perfecta para una persona y está completamente en blanco para un rastreador de IA. La diferencia se reduce a dónde se renderiza tu contenido. Esta guía explica la única pregunta que lo decide y cómo caer del lado correcto.
La única pregunta que lo decide todo
Cuando un rastreador de IA (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) obtiene tu página, lee el HTML que devuelve tu servidor. Normalmente no ejecuta JavaScript como lo hace un navegador. Así que la única pregunta que importa es:
¿Tu texto ya está en el HTML que envía el servidor, o solo aparece después de que el JavaScript se ejecuta en el navegador?
Si tu contenido principal se construye en el navegador, el rastreador ve una cáscara casi vacía. → JavaScript y los rastreadores de IA
Next.js: normalmente bien, si dejas que renderice en el servidor
Next.js puede ser muy apto para la IA, porque está hecho para renderizar en el servidor:
- App Router (Server Components) renderiza tus componentes a HTML en el servidor de forma predeterminada. Tu texto acaba en el HTML inicial: bien.
- Pages Router está bien cuando cargas tu contenido principal con
getServerSideProps(SSR) ogetStaticProps(generación estática). Esos datos se hornean en el HTML.
La trampa son los datos que obtienes solo en el navegador —por ejemplo dentro de un useEffect, o con una librería de datos del lado del cliente, donde la página llega vacía y se rellena tras cargar—. Un componente "use client" está bien para la interactividad, pero si las palabras que importan llegan solo tras una petición del navegador, no están en el HTML que lee el rastreador. Pon tu contenido principal en la ruta del servidor.
SPA de React puro: el caso difícil
Una app de React solo de cliente (Create React App, o Vite sin renderizado de servidor) suele enviar un <div id="root"></div> vacío y dibujarlo todo en el navegador. Para una persona es una página completa; para un rastreador de IA está en blanco. Tus opciones:
- Pasa a un framework que renderice en el servidor: Next.js, Remix o Astro.
- Añade prerenderizado estático para tus rutas de contenido, de modo que los rastreadores reciban HTML real.
No olvides los metadatos y los datos estructurados
Renderizar el texto en el servidor es la mayor parte de la batalla, pero termina el trabajo:
- Título, descripción, canonical, Open Graph: usa la Metadata API de Next.js (App Router) o
next/head(Pages Router) para que estén en el HTML del servidor y no se fijen después con JavaScript. - Datos estructurados: emite un
<script type="application/ld+json">renderizado en el servidor para que la IA reciba hechos explícitos. → datos estructurados · sitemaps y canonical
La parte honesta
No tienes que abandonar React. La hidratación y la interactividad rica están perfectamente bien: la IA lee el HTML inicial, y tu app puede seguir siendo tan dinámica como quieras encima de eso. La solución no es «usar menos JavaScript», sino «asegurarte de que la primera respuesta HTML ya contiene tus palabras». El renderizado de servidor, la generación estática y los React Server Components lo logran.
Cómo comprobarlo
Abre «Ver código fuente» (no el inspector, que muestra el DOM en vivo tras el JS) o ejecuta curl https://tusitio.com y busca el texto real de tus párrafos. Si ves tu titular y tu cuerpo de texto, los rastreadores también. Si ves un <div id="root"> vacío y un montón de etiquetas de script, tu contenido es solo de navegador. O pasa tu URL por un análisis gratuito de visibilidad para IA y confírmalo de un vistazo.
En resumen
React y Next.js no son el enemigo; el renderizado solo en el navegador sí. Mantén tu contenido principal en el servidor (SSR, SSG o Server Components), pon los metadatos y los datos estructurados en el HTML del servidor y verifícalo con «Ver código fuente». Empieza por la introducción al GEO y JavaScript y los rastreadores de IA, y si la IA sigue sin citarte, mira por qué mi sitio no aparece en la IA.