Volver al inicio

Generación de HTML API en el Servidor Sin Renderizado

El artículo explica por qué generar texto HTML en el servidor es un enfoque básico para servicios web. Ejemplos en Python sin dependencias, comparación de HTML API con JSON. Se discuten motores de plantillas y el rol del navegador en el renderizado.

HTML como API: el servidor emite texto, el navegador renderiza
Advertisement 728x90

Generando HTML como una API: Un servidor que devuelve texto plano

Crear un servicio web del lado del servidor es sencillo: responder a las solicitudes HTTP con texto plano en formato HTML. Este enfoque fundamental y confiable no requiere dependencias adicionales. El navegador se encarga de todo el trabajo complejo de renderizado automáticamente.

Aquí tienes un servidor mínimo en Python usando el módulo integrado http.server. Devuelve una página HTML estática para cualquier solicitud GET:

from http.server import BaseHTTPRequestHandler, HTTPServer

WEBPAGE = "<h1>Página web en Python!</h1>\n"

class HTMLServer(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.end_headers()
        self.wfile.write(str.encode(WEBPAGE))

webServer = HTTPServer(("localhost", 8080), HTMLServer)
print("Servidor ejecutándose en http://localhost:8080")
webServer.serve_forever()

Con curl, verás texto limpio y sin procesar:

Google AdInline article slot
$ curl localhost:8080
<h1>Página web en Python!</h1>

En el navegador, la etiqueta <h1> se muestra como un encabezado formateado. Añade CSS para estilizar:

WEBPAGE = """
<style>
body {
  background-color: lightblue;
  font-family: 'Comic Sans MS', cursive;
}
</style>
<h1>Página web en Python!</h1>
"""

El navegador aplica los estilos al instante—sin pasos adicionales necesarios.

El renderizado es responsabilidad del navegador

El servidor genera texto; el navegador lo parsea en DOM, calcula estilos, determina el diseño y aplica fuentes con DPI, espaciado y métricas correctas. Este proceso multietapa incluye análisis, cálculo de estilos, diseño y pintura.

Google AdInline article slot

El renderizado requiere conocimiento profundo de tipografía—desde convertir puntos a píxeles hasta manejar alturas de ascensores y descensores. Los navegadores gestionan toda esta complejidad por ti.

Generar HTML es simplemente manipulación de cadenas. No hace falta usar jergón como "renderizado del lado del servidor" que implica complejidad innecesaria.

Usar HTML para representar datos

Cualquier dato puede expresarse como HTML mediante plantillas simples de cadenas. Aquí tienes un ejemplo con los barrios de Nueva York:

Google AdInline article slot
boroughs = [
  "El Bronx",
  "Manhattan",
  "Brooklyn",
  "Queens",
  "Isla de Staten"
]

LIST = "<li>".join(boroughs)
WEBPAGE = "<h1>Barrios de NYC</h1><ul><li>" + LIST + "</ul>"

El navegador interpreta correctamente este código—incluso sin cerrar las etiquetas </li> (HTML5 es permisivo).

De forma similar, para JSON:

LIST = '","'.join(boroughs)
WEBPAGE = '{ "nyc_boroughs": ["' + LIST + '"] }'

Aquí gana HTML: incluye características nativas de hipermultimedia—enlaces, formularios—sin necesidad de JavaScript del lado del cliente.

  • Ventajas de generar HTML con cadenas:

- Funciona en cualquier lenguaje sin bibliotecas.

- Mínimo costo computacional.

- Fácil de depurar: curl muestra la salida cruda.

- Compatibilidad multiplataforma (bash, awk, Python).

API de HTML frente a API de JSON

Llámasela API de HTML: el servidor devuelve HTML en lugar de JSON. El navegador actúa como cliente, interpretando el hipermultimedia.

Compara:

HTML:

<h1>Barrios de NYC</h1>
<ul>
  <li>El Bronx
  <li>Manhattan
  <li>Brooklyn
  <li>Queens
  <li>Isla de Staten
</ul>

JSON:

{
  "nyc_boroughs": [
    "El Bronx",
    "Manhattan",
    "Brooklyn",
    "Queens",
    "Isla de Staten"
  ]
}

HTML combina datos y presentación. JSON solo entrega datos—requiriendo lógica del lado del cliente para mostrarlos.

Motores de plantillas para producción

Para servicios reales, usa motores de plantillas como Jinja2. Ofrecen escape automático, bucles, herencia y estructura.

Ejemplo con Jinja:

<h1>Barrios de NYC</h1>
<ul>
  {% for borough in boroughs %}
  <li>{{ borough }}
  {% endfor %}
</ul>
  • Beneficios clave de los motores de plantillas:

1. Escape automático de HTML para prevenir XSS.

2. Fragmentos reutilizables (partials).

3. Sintaxis nativa para tu lenguaje (Htmx para Rust, Zig).

4. Diseño sin estado—fácil de probar y depurar.

5. Sin sobrecarga de hidratación como en SPA.

A diferencia de React, donde el JSON se convierte en DOM en el cliente, las plantillas generan HTML completamente renderizado en el servidor.

Lo que realmente importa

  • El servidor produce texto HTML—el navegador se encarga del renderizado.
  • Una API de HTML entrega hipermultimedia, no solo datos JSON crudos.
  • Las operaciones de cadena funcionan en cualquier lugar, sin marcos.
  • Los motores de plantillas añaden seguridad y estructura.
  • Este enfoque escala en cualquier lenguaje de programación.

— Editorial Team

Advertisement 728x90

Leer después