Platzi
Platzi

Suscr铆bete a Expert y aprende de tecnolog铆a al mejor precio anual.

Antes: $249
$209
Currency
Antes: $249
Ahorras: $40
COMIENZA AHORA
Termina en: 8D : 12H : 57M : 7S

Diferencias entre SPA, SSR y Gatsby3/33

Lectura

Texto por @juandc

Gatsby no solo es r谩pido, tambi茅n es seguro.

Para entenderlo mejor debes conocer las diferencias entre Server Side Render y Single Page Applications.

React en Single Page Applications

Este tipo de aplicaciones es muy com煤n cuando trabajamos con React.js.

Las SPAs son p谩ginas que siempre cargan el mismo archivo HTML. Este, a su vez, carga un archivo gigante de JavaScript con toda la l贸gica de nuestra apliacaci贸n (por ejemplo, usando React.js).

Estas p谩ginas tienen una carga inicial muy lenta, ya que no podremos ver la informaci贸n importante hasta que termine de cargar el archivo de JavaScript. Pero una vez termina la carga inicial, las SPAs son muy r谩pidas, incluso al navegar por diferentes secciones de nuestra aplicaci贸n.

Como el archivo de JavaScript tiene todo el c贸digo de nuestra aplicaci贸n, el tiempo de navegaci贸n pasa de segundos a milisegundos. No necesitamos hacer m谩s requests al servidor. Pero en mucho casos debemos esperar algunos segundos para que termine la carga inicial y podamos utilizar la aplicaci贸n.

React en Server Side Rendering

Diferentes herramientas como Next.js nos ayudan a utilizar React en el servidor para no afectar el SEO y disminuir el tiempo de carga de nuestra aplicaci贸n, todo esto sin perder interactividad.

El Server Side Rendering tradicional es muy com煤n en aplicaciones construidas con WordPress, por ejemplo. Aunque estas p谩ginas tienen un tiempo de carga muy corto, la carga debe repetirse cada vez que el usuario navega por nuestra aplicaci贸n, es decir, casi todas las veces que damos click en un link o bot贸n.

Las herramientas de SSR con React.js son muy conscientes de este problema, por lo que convierten nuestra aplicaci贸n en una SPA inmediatamente despu茅s de que termina la carga inicial. Es decir, utilizan SSR en la primera carga y luego se convierten en SPAs para mejorar la navegaci贸n e interactividad de nuestro sitio.

React en Gatsby: lo mejor de ambos mundos

Gatsby es un generador de sitios est谩ticos. Esto quiere decir que en vez de renderizar desde el servidor, lo que sucede cada vez que un usuario entra a nuestra aplicaci贸n, Gatsby renderiza el contenido solo una vez en la etapa de desarrollo. Nuestro servidor no debe renderizar todo el tiempo, solo env铆a el HTML inicial (ya renderizado) para que m谩s adelante el navegador se encargue de cargar el c贸digo JavaScript que nos ayudar谩 a que nuestra p谩gina funcione como una SPA.

De esta forma obtenemos todos los beneficios: por ser una SPA, seguimos teniendo una alta interactividad y navegaci贸n muy r谩pida, y adem谩s, conseguimos una carga inicial muy r谩pida, en algunos casos incluso superior a la del SSR.

Gatsby vs. WordPress

Gatsby tambi茅n nos ayuda a consumir informaci贸n desde un CMS como WordPress. De esta forma podemos editar nuestro contenido desde una plataforma que ya conocemos sin que esto afecte al rendimiento de nuestra aplicaci贸n.

Gatsby:

  • Utiliza el Virtual DOM (m谩s velocidad)
  • Componentes
  • Hot Reloading
  • Code Splitting e im谩genes responsivas

WordPress:

  • Manejo manual del DOM
  • Debemos copiar y pegar para reutilizar c贸digo (aunque las buenas pr谩cticas nos pueden ayudar bastante)
  • Refresh para ver los cambios

Aportes 15

Preguntas 1

Ordenar por: