El Blog para Webmasters de Google [ES] : chromium

El renderizado dinámico es un proceso mediante el cual se puede pasar del contenido renderizado del cliente al previamente renderizado y viceversa para determinados agentes de usuario.

Deberás tener un procesador para poder ejecutar JavaScript y generar archivos HTML estáticos. Se trata de un proyecto de código abierto que renderiza mediante un Chromium sin interfaz gráfica. Las aplicaciones de página única suelen cargar datos en segundo plano o retrasar su carga para renderizar su contenido. Rendertron tiene mecanismos que determinan si se ha completado el renderizado de un sitio web y espera hasta que todas las solicitudes de red hayan finalizado y no haya ningún proceso pendiente.

Esta entrada se divide en los siguientes temas:

Aplicación web de muestra
Configuración de un servidor express.js básico que sirva la aplicación web
Instalación y configuración de Rendertron como middleware para aplicar renderizado dinámico

Aplicaciones web de muestra

La aplicación web Kitten Corner usa JavaScript para cargar varias imágenes de gatos de una API y las muestra en una cuadrícula.

Imágenes de gatitos adorables en cuadrícula y un botón para que aparezcan más: ¡esta aplicación lo tiene todo!

Así se representa el JavaScript:

const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50';

const tpl = document.querySelector('template').content;

const container = document.querySelector('ul');

function init () {

fetch(apiUrl)

.then(response => response.json())

.then(cats => {

container.innerHTML = '';

cats

.map(cat => {

const li = document.importNode(tpl, true);

li.querySelector('img').src = cat.url;

return li;

}).forEach(li => container.appendChild(li));

})

}

init();

document.querySelector('button').addEventListener('click', init);
La aplicación web usa un tipo de JavaScript reciente (ES6) que todavía no es compatible con el robot de Google. Con la prueba de optimización para móviles se puede comprobar si el robot de Google puede ver su contenido:

En la prueba de optimización para móviles se indica que la página está optimizada para estos dispositivos, pero en la captura de pantalla no aparece ningún gato. Aunque sí aparecen el título y el botón, pero no hay ninguna imagen de gatos.
Si bien este problema es fácil de solucionar, es útil saber cómo se configura el renderizado dinámico, puesto que permitirá que el robot de Google vea las imágenes de gatos sin que tengas que editar el código de la aplicación web.

Configurar el servidor

Si quieres mostrar la aplicación web, utiliza express, una biblioteca Node.js, para compilar servidores web.

El código del servidor tiene una estructura similar a la que aparece a continuación. Si quieres, consulta el código fuente completo del proyecto.

const express = require('express');

const app = express();

const DIST_FOLDER = process.cwd() + '/docs';

const PORT = process.env.PORT || 8080;

// Sirve recursos estáticos (imágenes, css, etc.)

app.get('*.*', express.static(DIST_FOLDER));

// Dirige el resto de las URL a index.html en nuestra aplicación de página única

app.get('*', (req, res) => {

res.sendFile(DIST_FOLDER + '/index.html');

});

// Inicia el servidor Express

app.listen(PORT, () => {

console.log(`Node Express server listening on http://localhost:${PORT} from ${DIST_FOLDER}`);

});

Puedes probar este ejemplo: si usas un navegador moderno, deberías ver muchas imágenes de gatos. Para ejecutar el proyecto desde el ordenador, deberás tener node.js para ejecutar estos comandos:

npm install express rendertron-middleware

node server.js

A continuación, dirige tu navegador a http://localhost:8080. Ahora debes configurar el renderizado dinámico.

Implementar una instancia de Rendertron

Rendertron ejecuta un servidor que toma una URL y devuelve un archivo HTML estático de la URL mediante el navegador Chromium sin interfaz gráfica. Sigue las recomendaciones del proyecto Rendertron y usa Google Cloud Platform.

Formulario para crear un proyecto de Google Cloud Platform

Puedes elegir el nivel gratuito, pero debes tener en cuenta que, si te decantas por esta opción, usar aplicaciones de producción puede conllevar costes tal como se indica en los precios de Google Cloud Platform.

1. Crea un proyecto en la consola de Google Cloud. Consulta el ID del proyecto que aparece bajo del campo de entrada.
2. Instala el SDK de Google Cloud tal como se describe en el documento e inicia sesión.
3. Clona el repositorio de Rendertron desde GitHub con:
git clone https://github.com/GoogleChrome/rendertron.git

cd rendertron

4. Ejecuta en tu ordenador estos comandos para instalar dependencias y compilar Rendertron:

npm install && npm run build

5. Para activar el caché de Rendertron, crea un archivo llamado config.json en el directorio de Rendertron que incluye el siguiente elemento:

{ "datastoreCache": true }
6. Ejecuta el siguiente comando desde el directorio de Rendertron, pero cambiando ID_DE_TU_PROYECTO por el ID del proyecto del paso 1.

gcloud app deploy app.yaml --project YOUR_PROJECT_ID

7. Selecciona una región, confirma la implementación y espera hasta que finalice.
8. Introduce en tu navegador la URL ID_DE_TU_PROYECTO.appspot.com, pero sustituyendo ID_DE_TU_PROYECTO por el ID de proyecto indicado en el paso 1. A continuación, debería aparecer la interfaz de Rendertron con un campo de entrada y botones.


	Interfaz de Rendertron después de la implementación en Google Cloud Platform

Si ves la interfaz web de Rendertron, significa que has implementado correctamente tu propia instancia de Rendertron. Apúntate la URL del proyecto (ID_DE_TU_PROYECTO.appspot.com), ya que la necesitarás en la siguiente fase del proceso.

Añadir Rendertron al servidor

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

npm install --save rendertron-middleware

Este comando instala el middleware de Rendertron desde npm, por lo que puedes añadirlo al servidor:

const express = require('express');
const app = express();
const rendertron = require('rendertron-middleware');

Configurar la lista de robots

Rendertron utiliza el encabezado HTTP del agente de usuario para determinar si una solicitud proviene de un robot o del navegador de un usuario y lo compara con una lista actualizada de agentes de usuario de robots. Dado que el robot de Google puede ejecutar JavaSrcipt, la lista no incluye el robot de Google de manera predeterminada. Para que Rendertron también procese las solicitudes del robot de Google, añádelo a la lista de agentes de usuario:

const BOTS = rendertron.botUserAgents.concat('googlebot');

const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

Rendertron compara el encabezado de agente de usuario con esta expresión regular más adelante.

Añadir el middleware

Para enviar solicitudes de robots a la instancia de Rendertron, su middleware debe estar incluido en nuestro servidor express.js. El middleware comprueba el agente de usuario que está haciendo las solicitudes y reenvía las de robots conocidos a la instancia de Rendertron. Añade el siguiente fragmento de código a server.js, cambiando "ID_DE_TU_PROYECTO" por el ID de tu proyecto de Google Cloud Platform:

app.use(rendertron.makeMiddleware({

proxyUrl: 'https://ID_DE_TU_PROYECTO.appspot.com/render',

userAgentPattern: BOT_UA_PATTERN

}));

Los robots que solicitan el sitio web de muestra reciben el archivo HTML estático de Rendertron, por lo que no hace falta que ejecuten JavaScript para mostrar el contenido.

Probar nuestra configuración

Para probar si la configuración de Rendertron se ha hecho correctamente, vuelve a ejecutar la prueba de optimización para móviles.

A diferencia de lo que pasaba en la primera prueba, ahora aparecen las imágenes de gatos. En la pestaña HTML se muestra toda la página HTML generada por código de JavaScript y se indica que Rendertron deja que JavaScript no muestre el contenido.

Conclusión

Has creado una configuración de renderizado dinámico sin editar 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, Unicornio de la Red Abierta