5 MIN LECTURA · Pedro Thomaz

La URL es una base de datos que ya tienes

Diorama corre en alojamiento estático sin backend, y aun así puedes compartir la habitación exacta que montaste como un enlace. El truco: codificar todo el estado de la app en el hash de la URL. Aquí está cómo funciona — y los cuatro sitios donde deja de funcionar.
La URL es una base de datos que ya tienes

Diorama, nuestra nueva habitación del Lab, corre en GitHub Pages. Alojamiento estático, sin backend, sin base de datos. Y aun así puedes montar una habitación y enviarle a alguien un enlace que abre tu habitación exacta — sin cuenta, sin servidor, sin registro guardado en ningún sitio. El truco es viejo y poco usado: poner todo el estado en la URL.

El hash es almacenamiento gratis

Todo lo que viene después del # en una URL — el fragmento — nunca viaja al servidor. Vive enteramente en el navegador. Eso lo convierte en el lugar perfecto para guardar estado de la aplicación que quieres que viaje con un enlace pero nunca se persista en el servidor.

El estado de Diorama es pequeño y estructurado: una lista de muebles (tipo, posición, rotación, color) y los ajustes de la habitación (paredes, suelo, alfombra, lámparas). Lo serializamos a JSON, lo codificamos en base64 y lo ponemos en el hash — #s=eyJsYXlvdXQ…. Al cargar, si ese parámetro está presente, lo decodificamos y reconstruimos la habitación antes que nada. Un enlace compartido gana al local storage; el local storage gana a la habitación por defecto.

const encode = p => btoa(unescape(encodeURIComponent(JSON.stringify(p))));
const url = location.origin + location.pathname + '#s=' + encodeURIComponent(encode(state));

Ese es el "backend" entero. Copia la cadena, pega el enlace, y el navegador de quien lo recibe reconstruye la escena de forma determinista — los mismos datos siempre producen la misma habitación.

¿Por qué no usar un servidor?

Porque para muchas cosas no hace falta, y cada servidor que añades es algo que alojar, asegurar, respaldar y pagar. Si el estado es pequeño, estructurado y solo tiene sentido para quien lo creó, la URL es una base de datos que ya tienes — distribuida globalmente, gratis y sin necesidad de autenticación.

Dónde deja de funcionar

El patrón tiene límites honestos, y fingir lo contrario es como la gente se quema:

La otra mitad: una imagen

Un enlace reconstruye la escena interactiva, pero la gente también solo quiere una imagen para publicar. Así que Diorama tiene un segundo camino de compartición: renderizar el fotograma actual a un PNG con canvas.toDataURL() (con preserveDrawingBuffer activado) y disparar una descarga. Un enlace para "ven a jugar con la mía", una imagen para "mira lo que hice". Entre los dos, no hay servidor alguno.

Juega con él en el Diorama en vivo, o lee el código en GitHub.