Web & Business

Diferencias entre sitios generados estáticos y aplicaciones renderizadas del lado del servidor

0

Los sitios generados estáticamente o las aplicaciones de renderizado previo y del lado del servidor son dos formas modernas de construir aplicaciones front-end utilizando marcos JavaScript. Estos dos modos, aunque diferentes, a menudo se mezclan como la misma cosa y en este tutorial, vamos a aprender sobre las diferencias entre ellos.

Actualmente, JavaScript tiene tres tipos de aplicaciones con las que puede crear: aplicaciones de una sola página (SPA), sitios generados con pre-renderizado / estático y aplicaciones renderizadas del lado del servidor. Los SPA tienen muchos desafíos, uno de los cuales es la optimización de motores de búsqueda (SEO). Las posibles soluciones son hacer uso de generadores de sitios estáticos o renderizado del lado del servidor (SSR).

En este artículo, los explicaré junto con una lista de sus ventajas y desventajas para que tenga una visión equilibrada. Vamos a ver qué es la generación / pre-renderizado estático, así como los marcos como Gatsby y VuePress que ayudan a crear sitios generados estáticamente. También veremos qué son las aplicaciones renderizadas del lado del servidor (SSR), así como los marcos como Nextjs y Nuxtjs que pueden ayudarlo a crear aplicaciones SSR. Finalmente, cubriremos las diferencias entre estos dos métodos y cuál de ellos debe usar al crear su próxima aplicación.

¿Qué es un generador de sitio estático?

Un generador de sitio estático (SSG) es una aplicación de software que crea páginas HTML a partir de plantillas o componentes y una fuente de contenido determinada. Le da algunos archivos de texto y contenido, y el generador le devolverá un sitio web completo, y este sitio web completo se conoce como un sitio generado estático. Lo que esto significa es que las páginas de su sitio se generan en el momento de la compilación y el contenido de su sitio no cambia a menos que agregue nuevos contenidos o componentes y «reconstruya» o tenga que reconstruir su sitio si desea que se actualice con nuevo contenido.

Cómo funciona la generación de sitios estáticos

Este enfoque es bueno para crear aplicaciones que el contenido no cambia con demasiada frecuencia: sitios que el contenido no tiene que cambiar según el usuario y sitios que no tienen mucho contenido generado por el usuario. Un ejemplo de dicho sitio es un blog o un sitio web personal. Veamos algunas ventajas de usar sitios generados estáticos.

PROS

  • Sitio web rápido: dado que todas las páginas y el contenido de su sitio se han generado en el momento de la compilación, no tiene que preocuparse por las llamadas API al servidor para obtener contenido y esto hace que su sitio sea muy rápido.
  • Fácil de implementar: después de que se haya generado su sitio estático, quedaría con archivos estáticos y, por lo tanto, se puede implementar fácilmente en plataformas como Netlify.
  • Seguridad: el sitio generado estático está compuesto únicamente por archivos estáticos, el riesgo de ser vulnerable a los ataques cibernéticos es mínimo. Esto se debe a que los sitios generados estáticos no tienen base de datos, los atacantes no pueden inyectar código malicioso o explotar su base de datos.
  • Puede usar el software de control de versiones (por ejemplo, git) para administrar y rastrear cambios en su contenido. Esto puede ser útil cuando desee revertir los cambios que realizó en el contenido de su sitio.

CONTRAS

  • El contenido puede volverse obsoleto si cambia demasiado rápido.
  • Para actualizar su contenido, debe reconstruir el sitio.
  • El tiempo de compilación aumentaría según el tamaño de la aplicación.

Ejemplos de generadores de sitios estáticos son GatsbyJS y VuePress.

Echemos un vistazo a cómo crear sitios estáticos con estos dos generadores.

¿Qué es una Server-Side Rendering? (SSR)

La representación del lado del servidor (SSR) es el proceso de mostrar páginas web en el servidor y pasarlo al navegador / lado del cliente en lugar de mostrarlo en el navegador. El lado del servidor envía una página totalmente renderizada al cliente; el paquete JavaScript del cliente se hace cargo y permite que funcione el marco SPA.

Esto significa que si tiene una aplicación que se representa en el lado del servidor, su contenido se obtiene en el lado del servidor y se pasa a su navegador para mostrarlo a su usuario. Con la representación del lado del cliente es diferente, primero deberá navegar a esa página antes de que obtenga datos de su servidor, lo que significa que su usuario tendrá que esperar unos segundos antes de recibir el contenido de esa página. Las aplicaciones que tienen SSR habilitado se denominan aplicaciones renderizadas del lado del servidor.

Cómo funciona el Server-Side Rendering (SSR)

Este enfoque es bueno para crear aplicaciones complejas que requieren la interacción del usuario, dependen de una base de datos o donde el contenido cambia muy a menudo. Esto se debe a que el contenido de estos sitios cambia con mucha frecuencia y los usuarios necesitan ver el contenido actualizado tan pronto como se actualizan.

También es bueno para las aplicaciones que tienen contenido personalizado dependiendo de quién lo está viendo y las aplicaciones donde necesita almacenar datos específicos del usuario, como el correo electrónico y las preferencias del usuario, mientras que también atiende al SEO. Un ejemplo de esto es una gran plataforma de comercio electrónico o un sitio de redes sociales.

 Veamos algunas de las ventajas de renderizar sus aplicaciones en el lado del servidor.

Pros

  • El contenido está actualizado porque recupera contenido sobre la marcha;
  • Su sitio se carga rápidamente porque recupera su contenido en el lado del servidor antes de presentarlo al usuario;
  • Dado que en SSR JavaScript se representa en el lado del servidor, los dispositivos de sus usuarios tienen poca relevancia para el tiempo de carga de su página y esto conduce a un mejor rendimiento.

CONTRAS

  • Más llamadas API al servidor ya que se realizan por solicitud;
  • No se puede implementar en un CDN estático.

Otros ejemplos de marcos que ofrecen SSR son Next.js y Nuxt.js.

Echando un vistazo más de cerca a las diferencias

Ahora que hemos analizado tanto los generadores de sitios estáticos como el renderizado del lado del servidor y cómo comenzar a usarlos con algunas herramientas populares, veamos las diferencias entre ellos.

Generadores de sitios estáticos

Se puede implementar fácilmente en una CDN estática.

El contenido y las páginas se generan en el momento de la compilación.

El contenido puede volverse obsoleto rápidamente.

Menos llamadas a la API ya que solo se realiza en el momento de la compilación.

Representación del lado del servidor.

No se puede implementar en una CDN estática.

El contenido y las páginas se generan por solicitud.

El contenido siempre está actualizado.

Realiza llamadas a la API cada vez que se visita una nueva página.

Conclusión

Podemos ver por qué es tan fácil pensar que tanto los sitios generados estáticos como las aplicaciones renderizadas del lado del servidor son iguales. Ahora que sabemos las diferencias entre ellos, recomendaría que intentemos aprender más sobre cómo construir sitios generados estáticos y aplicaciones renderizadas del lado del servidor para comprender completamente las diferencias entre ellos.

Recursos adicionales

Aquí hay algunos enlaces útiles que seguramente lo ayudarán a comenzar en poco tiempo:

 

Tomado de: Smashing Magazine
Por: Timi Omoyeni
Desarrollador front-end con sede en Lagos, Nigeria. Le gusta convertir diseños en código y construir cosas para la web.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *