Renderizado dinámico con Rendertron

Jueves, 31 de enero de 2019

Muchos frameworks frontend dependen de JavaScript para mostrar contenido. Esto puede significar que Google tarde algún tiempo en indexar su contenido o actualizar el contenido indexado.

Una solución alternativa que discutimos en Google I/O
este año es
renderizado dinámico. Hay muchas formas de implementar esto. Esta publicación de blog muestra una implementación de ejemplo de renderizado dinámico utilizando
Rendertron, que es una solución de código abierto basada en Chromium sin interfaz gráfica.

¿Qué sitios deberían considerar el renderizado dinámico?

No todos los motores de búsqueda o bots de redes sociales que visitan su sitio web pueden ejecutar JavaScript. Googlebot
podría tardar tiempo en ejecutar su JavaScript y tienealgunas limitaciones

, por ejemplo.
El renderizado dinámico es útil para contenido que cambia a menudo y necesita JavaScript para mostrarse. La experiencia de usuario de su sitio (especialmente el tiempo hasta elprimer despliegue significativo
) puede beneficiarse de considerar el renderizado híbrido (por ejemplo,).

Angular Universal

).
¿Cómo funciona el renderizado dinámico?

Renderizado dinámico
significa cambiar entre contenido renderizado del lado del cliente y contenido pre-renderizado para agentes de usuario específicos. Necesitará un renderizador para ejecutar el JavaScript y producir HTML estático. Rendertron es un proyecto de código abierto que utiliza Chromium sin interfaz gráfica

para renderizar. Las aplicaciones de una sola página (SPA) a menudo cargan datos en segundo plano o posponen el trabajo para renderizar su contenido. Rendertron tiene mecanismos para determinar cuándo un sitio web ha completado el renderizado. Espera hasta que todas las solicitudes de red hayan finalizado y no haya trabajo pendiente.

1. Esta publicación cubre:
2. Eche un vistazo a una aplicación web de muestra Configure un pequeño servidor express.js
3. para servir la aplicación web

Instale y configure Rendertron como middleware para el renderizado dinámico

La aplicación web de muestra
La aplicación web “kitten corner”

utiliza JavaScript para cargar una variedad de imágenes de gatos desde una API y las muestra en una cuadrícula.

Aquí está el JavaScript:
La aplicación web utiliza JavaScript moderno (ES6), queaún no es compatible con Googlebot
. Podemos usar la prueba de optimización para móviles

para verificar si Googlebot puede ver el contenido:

Aunque este problema es fácil de solucionar, es un buen ejercicio para aprender a configurar el renderizado dinámico. El renderizado dinámico permitirá a Googlebot ver las imágenes de gatos sin cambios en el código de la aplicación web.

Configure el servidor
Para servir la aplicación web, usemos la biblioteca, a express
node.js

para construir servidores web.
El código del servidor se ve así (encuentre el
código fuente completo del proyecto

aquí):
Puede probar el ejemplo en vivo
- debería ver un montón de imágenes de gatos si está utilizando un navegador moderno. Para ejecutar el proyecto desde su computadora, necesita node.js

para ejecutar los siguientes comandos:
Luego apunte su navegador ahttps://localhost:8080

. Ahora es el momento de configurar el renderizado dinámico.

Implemente una instancia de Rendertron
Rendertron ejecuta un servidor que toma una URL y devuelve HTML estático para la URL utilizando Chromium sin interfaz gráfica. Seguiremos
la recomendación del proyecto Rendertron
y utilizaremos.

Google Cloud Platform
. Tenga en cuenta que puede comenzar conel nivel de uso disponible sin pago
; el uso de esta configuración en producción puede generar costos de acuerdo con los.

1. precios de Google Cloud Platform
   .Cree un nuevo proyecto en la
2. consola de Google Cloud . Tome nota del “ID del proyecto” debajo del campo de entrada.
   Instale el
3. Google Cloud SDK como se describe en la documentación
4. e inicie sesión.
5. Clone el repositorio de Rendertron desde GitHub con: Ejecute los siguientes comandos para instalar dependencias y construir Rendertron en su computadora: Habilite la caché de Rendertron creando un nuevo archivo llamado
6. config.json
   en el directorio rendertron con el siguiente contenido: Ejecute el siguiente comando desde el directorio rendertron. Sustituya
7. YOUR_PROJECT_ID
8. con su ID de proyecto del paso 1. Seleccione una región de su elección y confirme la implementación. Espere a que termine. Ingrese la URL YOUR_PROJECT_ID.appspot.com. Deberías ver la interfaz de Rendertron con un campo de entrada y algunos botones.

Cuando veas la interfaz web de Rendertron, habrás desplegado con éxito tu propia instancia de Rendertron. Toma nota de la URL de tu proyecto (YOUR_PROJECT_ID.appspot.com), ya que la necesitarás en la siguiente parte del proceso.

Añadir Rendertron al servidor

El servidor web utiliza express.js y Rendertron tiene un express.js
middleware. Ejecuta el siguiente comando en el directorio del archivo server.js :

Este comando instala el rendertron-middleware desde npm para que podamos añadirlo al servidor:

Configurar la lista de bots

Rendertron utiliza el encabezado HTTP user-agent para determinar si una solicitud proviene de un bot o del navegador de un usuario. Tiene una
lista bien mantenida de agentes de usuario de bots
para comparar. Por defecto, esta lista no incluye a Googlebot, porque Googlebot puede ejecutar JavaScript. Para que Rendertron también renderice las solicitudes de Googlebot, añade Googlebot a la lista de agentes de usuario:

Rendertron compara el encabezado user-agent con esta expresión regular más adelante.

Añadir el middleware

Para enviar solicitudes de bots a la instancia de Rendertron, necesitamos añadir el middleware a nuestro servidor
express.js . El middleware comprueba el agente de usuario que realiza la solicitud y reenvía las solicitudes de bots conocidos a la instancia de Rendertron. Añade el siguiente código a server.js y no olvides sustituir YOUR_PROJECT_ID por tu ID de proyecto de Google Cloud Platform:

Los bots que solicitan el sitio web de muestra reciben el HTML estático de Rendertron, por lo que los bots no necesitan ejecutar JavaScript para mostrar el contenido.

Probando nuestra configuración

Para probar si la configuración de Rendertron fue exitosa, ejecuta la Prueba de optimización para móviles nuevamente.

A diferencia de la primera prueba, las imágenes de gatos son visibles. En la pestaña HTML podemos ver todo el HTML que generó el código JavaScript y que Rendertron ha eliminado la necesidad de JavaScript para mostrar el contenido.

Conclusión

Creaste una configuración de renderizado dinámico sin realizar cambios en la aplicación web. Con estos cambios, puedes servir una versión HTML estática de la aplicación web a los rastreadores.

Publicado por Martin Splitt, Open Web Unicorn