Sitios web estáticos vs dinámicos: una comparación exhaustiva – techsyncer

Cuando mucha gente piensa en un sitio web, el concepto de sitios web estáticos frente a dinámicos nunca entra en juego. Después de todo, ¿el sitio web simplemente aparece, verdad? Técnicamente sí, pero hay mucho sucediendo detrás de escena.

Para alguien que planea crear o migrar un sitio web, conocer estos dos tipos de sitios web es esencial. El tipo de sitio que elijas afectará cómo los desarrolladores gestionan y actualizan el sitio y los posibles costos operativos y de mantenimiento.

En este artículo, aprenderás acerca de las diferencias entre sitios web estáticos y dinámicos. Verás cómo los desarrolladores crean sitios estáticos y dinámicos, cómo tu navegador los renderiza y muchas otras comparaciones útiles.

¿Qué son los sitios web estáticos y dinámicos?

Como su nombre indica, los elementos de un sitio web estático son fijos o codificados de manera rígida. El contenido de un sitio web estático nunca cambia independientemente del navegador que uses.

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

La mayoría de los sitios web estáticos son de naturaleza informativa. Toma como ejemplo los blogs personales, donde la intención es mostrar información a los lectores. En un blog personal, los usuarios generalmente solo exploran el contenido del sitio.

Por el contrario, un sitio web dinámico va más allá del código del lado del cliente. En última instancia, un sitio web dinámico se basa en HTML y CSS, al igual que un sitio web estático. Pero, para que un sitio web dinámico sea funcional, requiere lenguajes del lado del servidor como PHP, ASP.net, o JavaScript para generar código HTML de manera dinámica.

Los sitios web dinámicos utilizan el término CRUD, que significa Crear, Leer, Actualizar, Eliminar. CRUD representa operaciones realizadas contra una base de datos. Y si adivinaste que los sitios web dinámicos utilizan bases de datos, ¡adivinaste bien!

Diferencias en la Representación del Sitio Web

¿Cómo entregan los servidores web sitios web estáticos y dinámicos a los navegadores de los lectores?

Sitios Web Estáticos Entregan Exactamente el Código en el Servidor Web

Recuerda que los sitios web estáticos contienen documentos HTML codificados en duro con archivos CSS y JS opcionales. El código que cargues en un servidor web es precisamente el código que se servirá a los usuarios que navegan tu sitio web.

Por ejemplo, a continuación se muestra un proyecto de sitio web estático en Visual Studio Code que contiene tres archivos. La página de inicio de este sitio web estático solo muestra un encabezado y un botón.

Cuando haces clic en un botón en esta página web simple, se revelará una palabra.

Static Website Project in Visual Studio Code

A continuación se muestra el código del archivo index.html. Este sirve como la página de inicio del sitio web estático.

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

El siguiente código a continuación es para style.css. Este archivo CSS define el estilo de cómo aparecen los elementos de la página de inicio en el navegador.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

Por último, el código a continuación es el código para button.js que contiene el código JavaScript que el navegador activará cuando un lector haga clic en el botón.

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

Supongamos que el sitio web estático está ahora en funcionamiento, la demostración a continuación es cómo se vería. Luego, si abres el código fuente de la página, deberías ver que el código de la página es exactamente igual al código fuente del archivo index.html.

Nota: Este ejemplo de sitio web estático se probó utilizando la extensión HTTP Server / HTML Preview en Visual Studio Code.

Como puede ver en la demostración anterior, incluso si el usuario interactúa con la página haciendo clic en un botón, el código subyacente nunca cambia. Ese es el comportamiento de un sitio web estático; el navegador se encarga de todo.

Los sitios web dinámicos leen primero una base de datos

A diferencia de un sitio web estático, un sitio web dinámico utiliza un procesamiento en el lado del servidor para generar el código. Esto significa que el código subyacente detrás de la página puede cambiar en cualquier momento, dependiendo del diseño.

Por ejemplo, a continuación se muestra un proyecto de sitio web dinámico utilizando Node.js que contiene solo un archivo JavaScript.

Dynamic Website Project in Visual Studio Code

El código para dynamicsite.js se muestra a continuación. Este código es un script en el lado del servidor que muestra la hora actual de la computadora cada vez que se carga la página.

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

La demostración a continuación muestra cómo se muestra el sitio web dinámico. El código HTML subyacente cambia cada vez que se actualiza la página.

Nota: Este ejemplo de sitio web dinámico se ha probado utilizando Node.js.

Ese es un ejemplo básico de cómo se comporta un sitio web dinámico en el fondo.

Sitios web estáticos vs dinámicos: ¿Cómo se administran los contenidos?

Ahora sabe cómo se representan y sirven los sitios web estáticos y dinámicos. ¿Cómo se agregan, actualizan o eliminan contenido? Supongamos que tiene un sitio web estático de blog personal, ¿cómo agrega nuevas publicaciones? Si tiene un sitio web dinámico de comercio electrónico, ¿cómo agrega nuevos productos a su catálogo?

El tipo de sitio web que definas determinará cómo gestionas el contenido de tu sitio. A continuación, se presentan las opciones típicas para la gestión de contenido.

Codificación manual de páginas estáticas

Cuando un sitio web o su contenido necesita actualizarse, hacerlo casi siempre implica cambios en el código. El método fundamental y probablemente el más antiguo es la codificación manual. Este método implica editar el código fuente del sitio con cualquier editor de texto.

Este método puede ser el más tedioso y que consume más tiempo, ya que cada aspecto del sitio web debe codificarse manualmente. Sin embargo, esto también otorga a los sitios web estáticos flexibilidad en el diseño, ya que cada página puede ser diferente.

Algunos sitios web con un diseño y función sencillos pueden aprovechar escribir su contenido en Markdown. Luego, convertir esos documentos de Markdown a HTML, produciendo así páginas web que luego se pueden cargar en el servidor web.

Por ejemplo, el sitio web estático a continuación tiene tres páginas; index.html, page1.html, y page2.html. Aunque estos archivos son parte de un sitio web estático, se escribieron para tener diseños o temas diferentes.

Example of a static website with different page themes

Generadores de Sitios Web Estáticos

En lugar de escribir código manualmente, los generadores de sitios web estáticos ofrecen la capacidad de crear un sitio web estático completo ya sea desde cero o a partir de plantillas predefinidas. Las nuevas publicaciones o páginas suelen escribirse en Markdown, y los archivos HTML se generan durante el proceso de construcción del sitio web.

Los archivos resultantes luego se pueden cargar en un servidor web para dar vida al sitio web. En algunos generadores de sitios web estáticos, también es posible escribir contenido en otros formatos como HTML directo y JSON.

A continuación se muestra una lista de algunos de los generadores de sitios web estáticos más populares que puedes explorar.

El sitio web de ejemplo a continuación fue generado utilizando Jekyll sin tener que escribir una sola línea de código.

Sistema de Gestión de Contenidos (CMS)

A estas alturas, has oído hablar de WordPress. ¿Qué tal Drupal, Joomla y Netlify? Esos son los nombres de los sistemas de gestión de contenido más populares o CMS.

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

Los sitios web dinámicos suelen conectarse a un CMS. De hecho, cuando compras un paquete de alojamiento web, ya incluye constructores de sitios web y CMS que se pueden implementar con un solo clic (o unos pocos clics) del ratón. El CMS es probablemente la razón por la que los sitios web dinámicos son la opción popular.

Los sitios web estáticos se pueden configurar para utilizar también un sistema de gestión de contenido (CMS). Por ejemplo, Netlify tiene soporte de integración con generadores de sitios estáticos como Jekyll, Hugo y NextJS. Aunque la configuración de la integración del CMS con estas plataformas generalmente implica más trabajo en comparación con los sitios web dinámicos.

Cuándo usar un sitio web estático frente a un sitio web dinámico

Si te preguntas cuándo se responderá a la antigua pregunta, “¿Cuál es mejor?”, puedes seguir esperando. Probablemente no habrá un ganador definitivo. Si un sitio web dinámico o estático es mejor es subjetivo y depende de cuáles sean tus requisitos.

Hay mucho que considerar al elegir el tipo de sitio web. A continuación, se presentan solo algunos de los factores a tener en cuenta.

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

Conclusión

Si ya tienes un sitio web, probablemente ya sepas si es estático o dinámico. Si no es así, deberías haber aprendido en este artículo cómo distinguir entre estos dos tipos.

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

Si estás planeando construir un nuevo sitio web, tu elección dependerá en gran medida de su propósito. Por ejemplo, sitios web de comercio electrónico y reclutamiento pueden ser mejores como sitios web dinámicos, mientras que un blog o un sitio web de cartera encontrará suficientes los sitios web estáticos.

Los sitios web estáticos son donde todo comenzó y probablemente nunca desaparecerán, especialmente ahora que los generadores de sitios estáticos están ganando más popularidad. Los sitios web dinámicos solo mejorarán a medida que se produzcan desarrollos continuos.

Lecturas adicionales

Asegúrate de consultar estas otras publicaciones de ATA si estás interesado en aprender más sobre sitios web estáticos y dinámicos.

Cómo alojar un sitio web estático de Azure respaldado por Cloudflare