Sitios web estáticos vs. dinámicos

· 7 min de lectura
Sitios web estáticos vs. dinámicos

Seguramente escuchaste estos términos, y si no entendiste cuál es la diferencia, llegaste al lugar indicado.

Vamos a empezar desde el inicio.

¿Qué es un Sitio Web?

Cada vez que ingresas a un sitio web, el navegador descarga de forma temporal algunos archivos que pueden ser de tipo:

  • HTML. es un lenguaje de marcado que basicamente define como sera la estructura de la página
  • CSS. es un lenguaje de estilos, donde se define los estilos de la pagina (colores, tamaños, fuentes, etc.)
  • JS. es un lenguaje de programación con el cual se define funcionalidades más avanzadas (manejo de eventos, estados, obtención de datos, etc.)

Todos los archivos que el navegador descarga son considerados en cierta manera como archivos estáticos, porque literal el navegador solo debe descargarlos, interpretarlos y usarlos, para mostrarnos un bonito contenido como este.

Se podría decir que en realidad todas las páginas que visitamos el fin y al cabo son de algún modo páginas estáticas (porque el final son todos archivos) cuando ya están en nuestro navegador.

Sitios estáticos,  Sitios dinámicos

¿Entonces cómo saber cuándo un sitio es estático o dinámico?.

El truco está en conocer cómo se generan esos archivos HTML, JS y CSS de los que hablamos, que luego nuestro navegador descarga.

Los sitios web estáticos solo exponen los archivos previamente elaborados  que el necesita el navegador y habilita su descarga mientras que los sitios dinámicos necesitan de una base de datos e incluso de otro lenguaje de programación para generar los archivos estáticos que el navegador necesitara.

Osea que en un sitio dinámico, estos archivos se generan cada vez que alguien ingresa al sitio, como te imaginarás esto los hace más lentos, más costosos de construir y mantener también menos confiables.

¿Cómo comenzó todo esto?

Por lo que tengo entiendo, en el pasado, cuando Internet aún estaba en su infancia, solo había sitios web estáticos.

Eso quiere decir que si querías crear una nueva página, se tenía que ir a la  carpeta donde estaba tu sitio web en tu servidor, crear un nuevo archivo HTML, nombrarlo y luego codificar su contenido, esto lo hacías para cada página. ¿Te lo imaginas?

¡Esto se vuelve realmente tedioso y repetitivo después de un tiempo! Es como reinventar la rueda cada vez que te subes a tu coche.

Es cuando finalmente, a principios de siglo, los sitios web dinámicos se volvieron muy populares porque hicieron posibles cosas nuevas e interesantes:

Por ejemplo si tenías un blog, no tenías que codificar un nuevo archivo HTML cada vez que quería publicar un nuevo artículo. Además, podías habilitar cosas geniales como los comentarios, reviews y otras cosas.

Si tenías un negocio, podrías empezar a vender productos a través del comercio electrónico sin problemas.

Los foros y los sitios con membresía de pago se convirtieron en una posibilidad.

Básicamente, gracias a la tecnología de sitios web dinámicos, Internet se volvió realmente interactivo y moderno.

Pero la historia no termina ahí...

¿Por qué no solo hacemos páginas dinámicas?

El problema con los sitios dinámicos es que dependen de bases de datos para generar contenido. Esto los hace más lentos, más costosos de construir y mantener y menos confiables.

Afortunadamente, alrededor de 2010, estas cosas llamadas "generadores de sitios estáticos" comenzaron a surgir.

Estos básicamente, funcionan con un sistema de archivos de plantilla y archivos de contenido.

El "generador" es como un motor que toma su contenido, lo combina con sus archivos de plantilla y genera un sitio web estático.

¡Eso significa que no tiene que crear manualmente ninguno de los archivos estáticos que se entregan a sus usuarios! Obtiene la conveniencia de un sitio dinámico con el rendimiento y la confiabilidad de un sitio estático. Lo cual es increíble

Con el surgimiento de los generadores de sitios estáticos, comenzaron a aparecer nuevas soluciones para manejar la gestión de contenido, blogs, comentarios de usuarios, comercio electrónico e incluso funcionalidades mucho más complejas. En realidad, el ecosistema alrededor de los generadores de sitios estáticos esta más vibrante que nunca y sigue creciendo rápidamente y todo el tiempo están sucediendo cosas nuevas y geniales.

Así que ahí es dónde estamos hoy. Los sitios estáticos son modernos y los sitios dinámicos son sitios del pasado.

Así funcionan los generadores de sitios estáticos

Las ventajas de los sitios estáticos

En 2016, Netlify publicó una publicación acerca de las 9 razones por las que su sitio debería ser estático, indagaré en algunas de estas ventajas desde mi experiencia

1. Mayor seguridad

Aquí está la cuestión: cada vez que visita un sitio web dinámico, tiene que comunicarse con una base de datos y crear todos los archivos que su navegador descarga en su computadora sobre la marcha. Si los piratas informáticos encuentran una manera de meterse en la base de datos, el sitio web quedaría comprometido.

Eso hace que tengas que actualizar las cosas todo el tiempo y estar siempre atento a nuevas vulnerabilidades de seguridad. Es por eso que se estima que el 70% de todos los sitios web de WordPress son vulnerables a fallos de seguridad conocidos.

Mientras tanto, cuando tiene un sitio estático, los archivos solo se compilan una vez cuando actualiza algo en su sitio web, no cada vez que alguien lo visita. Los ataques de piratería estándar (como inyección SQL) simplemente no funcionan.

2. Velocidades de carga más rápidas

Los sitios estáticos al ser solo una pila de archivos son muchísimo mas rápidos. Los sitios dinámicos heredados tienen que interactuar con una base de datos antes de crear todos los archivos que su navegador necesita descargar.

3. Más flexibilidad

La inmensa mayoría de todos los sitios web dinámicos se basan en WordPress, Drupal o algo similar. Eso significa que comienza con una solución única para todos, que luego intenta personalizar lo mejor que puede agregando diferentes complementos.

Estos complementos inevitablemente hacen que su sitio web (ya sea la parte que ven los usuarios o la parte del CMS) sea más lento. He visto muchos sitios que tardan más de 10 segundos en navegar a una nueva página en el panel de administración.

En primer lugar, cada generador esta enfocado en resolver ciertos tipos de proyectos en especial.

Static Site Generators - Top Open Source SSGs | Jamstack
Check out this showcase of some of the best, open source static site generators. This is community-drive so be sure to submit your favorite today!

Los generadores de sitios estáticos son mucho más flexibles y se pueden ajustar y personalizar según las necesidades específicas que se tenga. y a pesar de usar complementos y plugins adicionales, el hecho que todo se convierta en archivos al fin y al cabo hace que esto no afecte el rendimiento que los usuarios ven.

4. Necesitan menos recursos

Los sitios web dinámicos pueden fácilmente  volverse un desastre. Por ejemplo para ejecutar un sitio web de WordPress, necesita:

  • Un servidor web con Nginx o Apache
  • PHP (que debe mantener actualizado para protegerse de las vulnerabilidades de seguridad)
  • MySQL (también deberá mantenerlo actualizado)
  • WordPress en sí (oh, y definitivamente quieres mantener esto actualizado)
  • Un millón de complementos (¡asegúrese de instalar todas las actualizaciones nuevas!)
  • Su código de plantilla (sí, lo adivinó, esto también debe actualizarse)

En cambio los sitios web estáticos, una vez generados, se pueden alojar en cualquier tipo de servidor web incluso hay muchos servicios que se pueden usar para alojar los gratis (Haré un post de esto más adelante).

5. Mayor confiabilidad

Los sitios estáticos tienen dos ventajas principales de confiabilidad en comparación con los sitios dinámicos heredados:

En primer lugar, no hay bases de datos = no hay errores de "Error al establecer la conexión con la base de datos" = más tiempo de actividad. Esa es la ventaja más obvia.

Pero debido a que su sitio es completamente estático, significa que puede alojar sus archivos en un CDN. Eso significa "Content Delivery Network", que básicamente significa que sus archivos existen en un montón de servidores en diferentes partes del mundo. Si un servidor se desconecta, sus archivos serán servidos por otro diferente. No hay tiempo de inactividad, lo que significa que sus usuarios no se dan cuenta.

6. Más fácil de desarrollar

Los generadores de sitios estáticos son mucho más fáciles de trabajar y desarrollar en casi todas las formas. Eso significa tiempos de entrega más rápidos y menores costos de desarrollo para usted como cliente (¡o empleador!).

7. Escala más fácilmente

¿Qué sucede cuando su sitio web se vuelve viral? De repente, miles de personas intentan acceder a su sitio al mismo tiempo.

Lo que sucede cuando tiene un sitio web dinámico: para cada solicitud de página, se ejecuta un código complejo del lado del servidor para generar dinámicamente el contenido que se sirve a los usuarios esto hace que a más visitas se necesite más recursos, por tanto se vuelve costoso y más difícil de manejar.

En cambio los sitios web estáticos al haber sido generados y ser solo archivos, realmente pocos recursos para llegar a muchos usuarios.

8. Menores costos

Todo esto finalmente se suma a costos más bajos para construir y mantener su sitio web. El desarrollo es más rápido y ágil; necesita menos ancho de banda para adaptarse a cualquier cantidad de tráfico que reciba. Y no está pagando más solo para mantener su sitio web a salvo de vulnerabilidades de seguridad.

El dinero que ahorra, puede gastarlo en cosas más importantes que promueven sus objetivos comerciales.

Entonces, ¿Qué tipo de sitios web se construyen con tecnología de sitio estático?

La respuesta corta: Casi todos.

Respuesta Larga: Los tipos de sitio para los que más se están usando los sitios web estáticos hoy en día son:

  • Sitios web de marketing y ventas
  • Páginas de aterrizaje
  • Blogs
  • E-commerce
  • Revistas / Periódicos

Además también están el tipo de web estáticas que se pueden conectar a API para tener aún más funcionalidades. Hablaremos de estas en otro post

Realmente hay mucha tela que cortar con respecto a los sitios estáticos, espero pronto agregar más publicaciones al respecto.