01Cómo funciona internamente
React renderiza una representación virtual de la página en memoria y reconcilia los cambios con el DOM real. La página en sí puede entregarse en tres formas principales: client-side rendering, donde el navegador recibe un archivo HTML casi vacío y construye el contenido con JavaScript; server-side rendering, donde el servidor devuelve HTML terminado en cada solicitud; y static site generation, donde el HTML terminado se produce una sola vez en el momento de la compilación. Frameworks como Next.js y Remix añaden enrutamiento, obtención de datos y caché sobre estos modos. El modo que elija un sitio cambia lo que un crawler recibe en el primer byte, razón por la cual la estrategia de renderizado es una decisión de búsqueda y visibilidad de IA, no solo una preferencia del desarrollador.
React es una herramienta para construir páginas web a partir de piezas reutilizables. El hecho de que esas piezas se conviertan en HTML antes de llegar al visitante, o solo después de que JavaScript se ejecute en el navegador del visitante, decide con qué facilidad los motores de búsqueda y los rastreadores de IA pueden leer la página.
02Qué hacer al respecto esta semana
Confirma el modo de renderizado de cada URL importante con una herramienta como el informe de Inspección de URLs en Google Search Console, luego realiza un view-crawl de la misma URL con JavaScript desactivado. Si la vista desactivada está vacía o es muy pobre, la página depende del client-side rendering y el crawler está realizando un trabajo extra para verla. Para las páginas que deben posicionar o ser citadas, mueve el contenido principal, los enlaces internos y los datos estructurados a una respuesta renderizada en el servidor o pre-renderizada. Mantén React para las partes interactivas que lo necesiten, pero deja de permitir que bloquee las palabras que quieres indexar. Envía un sitemap actualizado tras el cambio y solicita la reindexación de las plantillas clave.
03Cómo se mide o se detecta
Los ingenieros suelen examinar la respuesta HTML sin procesar con curl o el comando View Source y la comparan con el DOM renderizado en el inspector del navegador. Los equipos de SEO analizan el texto en caché en Google Search Console y el renderizado en la herramienta de Inspección de URLs, que muestra el HTML renderizado, la captura de pantalla renderizada y cualquier error de consola. Las diferencias entre la respuesta sin procesar y el DOM renderizado son la señal de que JavaScript es el responsable del contenido visible. Las señales a nivel de página, como un tiempo prolongado para el first contentful paint, una baja proporción de texto en la respuesta inicial y un View Source vacío, son las huellas dactilares cotidianas de una página de React con la que los rastreadores tienen dificultades.
Cómo lo formula el catálogo
React es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página.
04Errores comunes
- Lanzar una aplicación de una sola página (SPA) sin pre-renderizado y asumir que Google la leerá como un visitante humano, para luego ver cómo páginas importantes desaparecen de los resultados.
- Colocar el copy de los productos, las preguntas frecuentes (FAQs) o el cuerpo de los artículos dentro de componentes que solo se montan tras una interacción del usuario, de modo que la primera respuesta HTML no contiene texto útil.
- Bloquear archivos de JavaScript, CSS o fuentes en el robots.txt, lo que impide que el rastreador renderice cualquier elemento que dependa de ellos.
- Añadir datos estructurados con una librería de solo cliente que inyecta JSON-LD después de la hidratación, de modo que el rastreador puede indexar las palabras pero no el esquema.
- Perseguir trucos de hidratación antes de solucionar el modo de renderizado subyacente, lo que deja los mismos problemas de indexación.
05Límites y con qué se suele confundir
React es una biblioteca de UI, no un framework ni una herramienta específica para motores de búsqueda. No decide, por sí misma, si una página se renderiza en el servidor, se genera estáticamente o se renderiza en el navegador; esa es una elección de arquitectura a nivel de proyecto. Tampoco es un servicio de renderizado, por lo que una página de React no es automática o simplemente lenta o rápida, bien indexada o no, solo por el hecho de usar React. Lo que hay que recordar es que lo que el servidor envía en la primera solicitud es lo que los crawlers y muchos sistemas de IA leerán, y React solo afecta a eso cuando el proyecto está configurado para usar server-side rendering, static site generation o un modelo de server component por streaming.
06Ejemplo práctico
Un pequeño sitio de e-commerce construyó una página de detalles de producto como una aplicación React renderizada en el cliente. El HTML sin procesar era un cascarón con un único `` vacío, y el título, el precio, la descripción y las reseñas aparecían solo después de que se ejecutaba JavaScript. Tras un trimestre de declive en las impresiones, el equipo pasó la URL por la herramienta de Inspección de URLs de Google y vio que el HTML renderizado sí contenía el contenido, pero la versión cached estaba casi vacía. Trasladaron la plantilla del producto a Next.js con generación estática, exportaron los datos estructurados como JSON-LD en la respuesta inicial y mantuvieron React para la galería y los controles de añadir al carrito. En pocas semanas, las URLs de los productos volvieron al índice y comenzaron a aparecer de nuevo para consultas de marca y de marca genérica.
07Lista de verificación previa al lanzamiento
- La respuesta HTML inicial de las páginas importantes contiene el título, el encabezado principal, el texto del cuerpo y los enlaces internos, no solo un contenedor vacío.
- Los datos estructurados están presentes en la respuesta sin procesar, no se inyectan después de la hidratación.
- El archivo robots.txt permite los scripts, las hojas de estilo y los archivos de fuentes que la página necesita para renderizarse.
- La página se renderiza y es interactiva dentro de los presupuestos que rastrea tu monitorización.
- Un sitemap refleja las URLs que quieres rastrear, y se ha solicitado la reindexación en Search Console tras el cambio.
La entrada anterior está escrita por GetLoopLoop. Lo que sigue es lo que los catálogos independientes recogen sobre el mismo término; nada de ello es la fuente de esta página.
- También llamado
- React.js, Reactjs
- Introducido
- 2013
- Desarrollado por
- Meta Platforms, Harshil Patel, Sebastian Markbåge
- Tipo de cosa
- marco de referencia para aplicaciónes móviles web, biblioteca de software, biblioteca de JavaScript
El mismo término en Wikipedia
Catalogado en 50 idiomas08Preguntas frecuentes
¿En qué se diferencia React de un framework completo como Angular?
React es una biblioteca de UI que se centra en el renderizado de componentes y la gestión del estado, mientras que frameworks como Angular incluyen en el paquete el enrutamiento, la obtención de datos y otras funciones de forma nativa. Debido a que React no prescribe un ecosistema, usted mismo debe añadir herramientas para el enrutamiento o la comunicación con el servidor. Esta distinción es importante para el SEO porque el enfoque de renderizado que elija (client vs. server) depende de usted en lugar de estar impuesto por el framework.
¿Debería utilizar el renderizado del lado del servidor con React para mejorar el SEO?
Depende de qué tan crítico sea para su contenido un indexado rápido y fiable, y de qué tan complejas sean sus interacciones de datos. Si necesita que los motores de búsqueda vean HTML completamente renderizado sin esperar la ejecución de JavaScript, se recomienda el renderizado del lado del servidor (o pre-renderizado). Para páginas menos sensibles al SEO, el renderizado solo en el cliente puede funcionar, pero debe supervisar el rendimiento del indexado.
¿Cómo puedo saber qué modo de renderizado está utilizando una URL?
Utilice la herramienta de Inspección de URLs de Google Search Console para solicitar una prueba en vivo y luego compare el HTML sin procesar (accesible mediante curl o Ver código fuente) con el DOM renderizado en el inspector del navegador. Las discrepancias indican un renderizado del lado del cliente; el contenido idéntico sugiere un resultado renderizado en el servidor o pre-renderizado.
¿Ejecuta Google JavaScript e indexa las páginas de React renderizadas en el cliente?
Googlebot sí ejecuta JavaScript y puede indexar páginas renderizadas en el cliente, pero el proceso puede retrasarse y podría omitir contenido debido a los límites del presupuesto de rastreo (crawl budget) o fallos en el renderizado. Para garantizar una indexación constante, muchos sitios utilizan el renderizado dinámico o el renderizado en el servidor (server-side rendering) como red de seguridad.
¿Qué puede salir mal si confío únicamente en el renderizado en el cliente para páginas de productos importantes?
Los motores de búsqueda podrían ver un shell de HTML vacío o mínimo y no indexar el contenido clave, lo que resultará en un menor posicionamiento o en la ausencia de páginas en los resultados de búsqueda. Normalmente, notarás una caída en el tráfico orgánico y verás muchas páginas listadas como “descubierta – actualmente no indexada” en Search Console.
¿Cuánto tiempo después de solucionar un problema de renderizado veré mejoras en las búsquedas?
Una vez que cambies a una salida en el servidor o pre-renderizada y Googlebot vuelva a rastrear la URL, los cambios de indexación pueden tardar desde unos pocos días hasta varias semanas, dependiendo de la frecuencia de rastreo. Monitoriza el informe de Inspección de URL y la sección de Cobertura en Search Console para realizar un seguimiento del progreso.
Wikimedia Commons
Visuales relacionados con fuente y licencia
09Preguntado en voz alta
El mismo término en las palabras que alguien usa al hablar con un asistente en lugar de escribir en un buscador: escrito desde la situación, y por eso cada pregunta lleva la situación de la que salió.
Depende de tu configuración de renderizado; las páginas renderizadas en el servidor o pre-renderizadas se indexarán rápidamente, mientras que el renderizado puramente en el cliente puede sufrir retrasos. Si el tiempo de indexación es crítico, añade SSR o una exportación estática ahora y luego solicita un nuevo rastreo en Search Console.
Google puede indexar páginas renderizadas en el cliente, pero suele haber un retraso y el bot podría perderse las actualizaciones si la página no se ha vuelto a rastrear. Activa un nuevo rastreo mediante la Inspección de URL y considera cambiar al renderizado en el servidor para lograr una visibilidad más rápida.
Sí, es un riesgo real. Si los motores de búsqueda reciben un HTML vacío y no logran ejecutar el JavaScript, es posible que tu contenido sea ignorado, lo que provocará un mal posicionamiento. El uso de renderizado en el lado del servidor o el pre-renderizado elimina este riesgo.