Modos de rendering en Next.js

2/19
Recursos

Aportes 5

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

CSR vs SSR vs SSG


–

Modos de rendering en Next.js

Rendering: Procesamiento de fragmentos de código y datos para mostrar un resultado. Por ejemplo de JS a HTML.

Modos de rendering:

  • Client-side: El rendering sucede en el navegador de cada uno de los usuarios. Ejemplo, Create-react-app.

  • Server-side: En este caso tenemos un servidor (Backend) que se encarga de forma parcial o total de hacer el rendering. Ejemplos con python(Django), PHP, etc.

  • Static rendering: El rendering se lleva a cabo el momento del Build Time (Cuando haces el Build de tu código). Este proceso solo sucede una vez a diferencia de los otros dos modos. Ejemplo de esto Next.js.

Next.js te da la ventaja que te permite crear aplicaciones Híbridas, esto significa que podemos elegir uno o varios de los Rendering modes antes mencionados.

🗒 Modos de Rendering

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 manera 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
💡 Next.js te permite crear aplicaciones híbridas
  • Next.js te permitirá escoger entre uno o más rendering modes para las diferentes páginas de tu aplicación

📌 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

App isomorfica

Una aplicación universal o isomórfica es aquella que comparte todo (o casi todo) su código entre el cliente y el servidor.
¿por qué debería ser isomórfica?
Porque hay una desventaja de la renderización del lado del cliente, es decir, cargar archivos demasiado grandes o demasiados archivos en la primera pantalla se volverá muy lento, por lo que puede poner la primera pantalla en el cliente para renderizar para mejorar La velocidad de la primera pantalla, después de que se carga la primera pantalla, la carretera comienza a ser controlada por el cliente y se convierte en una aplicación SPA, todo el código está escrito en JavaScript y el servidor usa nodejs.