Renderizando la web en 2020

Estrategias de renderizado web

  • SSR: Server-Side Rendering: se renderiza el HTML del cliente totalmente en el lado servidor. Esta aproximación suele ser el modelo de webs tradicionales.
  • CSR: Client-Side Rendering: se renderiza la aplicación completamente en el navegador haciendo uso de Javascript y la gestión del DOM. Comúnmente conocidas como Single Page Applications.
  • Rehydration: esta estrategia es un híbrido de las dos anteriores en el que se aprovecha el HTML y los datos renderizados desde el lado servidor, hidratándose con una aplicación javascript que se monta encima de esta.
  • Prerendering: en esta estrategia se renderiza la web en tiempo de construcción creando un artefacto que puede servirse de una manera totalmente estática.

Glosario de métricas sobre el performance

  • TTFB: Time to First Byte. El tiempo entre que pinchas un enlace y el primer byte de contenido llega al navegador.
  • FP: First Paint. Es el tiempo que tarda en pintarse el primer píxel que haga visible la web al usuario.
  • FCP: First Contentful Paint. Es el tiempo que tarda en ser visible el contenido que hemos solicitado.
  • TTI: Time To Interactive. Es el tiempo que tarda una página en ser interactiva.

SSR: Server Side Rendering

CSR: Client Side Rendering

Rehidratación: Entre el CSR y el SSR

Prerendering

  • Alto Rendimiento: las páginas no se construyen al vuelo, sino en la etapa de build, por lo que se minimiza el TTFB y los ficheros reconstruidos se sirven a través de una red global CD.
  • Alta seguridad: con esta aproximación el lado servidor se puede abstraer reduciendo las áreas de ataque
  • Barato y escalable: los despliegues son muy sencillos, ya que solo hay que servir un build estáticos de ficheros html, css y Javascript, además más barato porque solo necesitamos alojarlo en un CDN, que requiere menos coste que una aproximación que requiere de cómputo para el renderizado.

Jamstack en la vida real: Gatsbylius

Consideraciones SEO

Conclusión

Recursos

--

--

Full Stack Web Developer — adrianalonso.es

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store