Ideas/conceptos claves

Rendering procesar pedazos de código (JS) y datos para mostrar su resultado (HTML)

Apuntes

• Existen 3 formas de realizar un proceso de rendering
  1. Client-side
     • Sucede bajo demanda en el navegador
     • El navegador cada vez que visite nuestro sitio, el trabajo lo realizara el navegador de tus usuarios
     • Ej.: Cada que agregas JS usando la etiqueta src, debido a que estamos diciendo al navegador que ejecute nuestra etiqueta, descargue y que procese el JS para convertirlo en HTML
     • Ej.: create-react-app ⇒ Es un boilerplate para crear aplicaciones React, sin agregar cambios y servidores, lo que terminaremos enviando a los usuarios, será una aplicación client-side
  2. Server-side
     • Significa que tenemos un servidor que se encarga ya sea de forma total o parcial de hacer el rendering de JS y transformarlo a HTML
     • El navegador recibe por parte del servidor HTML ya listo para mostrarse
     • Sucede bajo demanda en el servidor
     • La gran mayoría de lenguajes y frameworks backend
     • Symfony (PHP), WordPress clásico (PHP), Flash (Python), Django (Python), etc.
  3. Static rendering
     • Trata del que el HTML se construya en el proceso de compilación
     • Transformará el código JS a HTML una sola vez en "build time"
     • Jekill, Wintersmith, Gatsby, Hugo, Next.js

<aside> 💡 Next.js te permite crear aplicaciones híbridas

</aside>

• Next.js te permitirá escoger entre uno o más rendering modes para las diferentes páginas de tu aplicación

<aside> 📌 RESUMEN: Existen 3 formas de poder hacer un proceso de rendering, client side la cual el navegador del cliente se encargará de transformar el JS a HTML, server side que significa que un servidor se encargara de la transformación baja demando o Static rendering, en la cual el proceso de renderizado se realiza una única vez al momento de compilar la aplicación

</aside>