Pre Renderizado de contenido HTML, clave para generar todo tipo de contenido

▶

Quiero hablarte de algo que considero muy interesante, que además creo que fue una muy buena idea que se me ocurrió, y que me ha servido muchísimo. Realmente, para dos cosas. A esto lo llamo "pre render de contenido", un nombre quizá algo grandilocuente, pero te voy a explicar brevemente a qué me refiero con esto.

Es un concepto del que ya te he hablado antes. Recuerda que en otros videos te he mostrado cómo generar un PDF y cómo optimizar un blog. Incluso publiqué una lista de reproducción en la que te muestro cómo llevé el puntaje del blog de 33 a 100 en Google Speed Test —o más o menos por ahí, ya sabes que ese test es un poco mañoso—. Para mí, la clave de esa mejora fue precisamente esto: el pre render de contenido.

¿Qué es exactamente y cómo funciona?

Todo comienza con mi CKEditor de contenido, donde tengo almacenado el contenido base. Puede ser una publicación o, como en este caso, un fragmento de un libro, es decir, un capítulo.

Ya tengo algunas cosas marcadas: código, párrafos, encabezados (H1, H2, etc.). Pero, por más que tengamos estructura, muchas veces —sobre todo en el caso de un blog— hacemos cambios adicionales. Por ejemplo, en los bloques de código, lo usual es aplicar un plugin de resaltado de sintaxis.

Sin embargo, lo que ves en este fragmento es solo una etiqueta <pre> con <code>. No hay ningún resaltado visual. Si recuerdas el video sobre generación de PDF, te mostraba cómo con Highlight.js se añaden etiquetas <span>, clases y colores.

Highlight.js solo se ejecuta del lado del cliente, es decir, cuando el usuario accede al navegador. Para mí eso era un problema:

• En el blog, quería quitar ese plugin de Highlight.js para mejorar el SEO (aunque no era muy pesado).
• En los libros, quería que el resultado ya viniera resaltado, sin depender del navegador.

Si has leído alguno de mis libros, ya sabrás que el código aparece en bloques grises sin resaltado, porque no había procesado nada. Justamente eso es lo que quería cambiar.

Implementación del pre render

Ya te lo había mostrado un poco: tengo un botón o enlace que me permite generar el contenido pre renderizado y de allí, mediante JS guardo los bloques HTML definidos con IDs que me interese guardar, también, doy un procesamiento previo para quitar, agregar atributos u otra estructura que quiero que tenga, reformateo para cumplir estándares como XHTML 5..

Existen paquetes en Node que permiten hacer eso: ejecutan el JavaScript, extraen el HTML y lo guardan. Yo no usé ninguno; preferí hacerlo de forma manual dentro de una vista editable, lo que me da mayor flexibilidad. Así, si luego quiero cambiar algo manualmente, puedo hacerlo.

Ventajas del enfoque manual

Me permite:

• Revisar y corregir contenido visualmente.
• Activar o desactivar cosas como índices o resaltado.
• Inyectar clases personalizadas en el HTML generado.
• Todo esto lo hago en una página que contiene HTML, clases para estilo y bastante JavaScript. Desde ahí puedo controlar lo que sucede antes de guardar el resultado final.

Estructura del sistema

Siempre trabajamos con dos campos:

• content: es el contenido editable, lo que escribes o importas.
• content_render: es el contenido renderizado, el resultado final que se guarda después del proceso de pre render.

Esto me permite mantener ambos: el original editable y el optimizado para mostrar o generar el PDF.

 ¿Qué puedo hacer con el resultado?

¡Muchas cosas! Dos ejemplos claros:

1. Mostrar un post del blog ya procesado, sin necesidad de resaltar en el cliente.
2. Generar libros con bloques de código ya optimizados.

Este enfoque me encanta porque me da control total sobre el contenido final, sin depender de librerías externas y en tiempo real.