No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

#UnderTheHood páginas: pre rendering de páginas

7/27
Recursos

Aportes 25

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Viendo el código fuente se sabe que se hace un pre-render, en aplicaciones construidas con create-react-app solo se puede ver una etiqueta en el body:

<div ="root></div>

(Firefox) Cmd + U, se abre la previsualización del código fuente y se puede ver que Nextjs renderiza todo nuestro contenido.

SSR aunque se desactive el JS desde el browser, sigue funcionando.

En realidad lo que esta haciendo Next en este caso no es SSR, sino Static rendering, la diferencia es que en SSR cada vez que llegue una nueva consulta Next va a ejecutar el codigo y va a devolver la vista renderizada en html, en cambio en Static rendering Next solo va a ejecutar el codigo UNA sola vez (eso sucede en el momento en que hacemos deploy) y a partir de aqui cada vez que llegue una consulta nueva siempre va a devolver la misma vista html que renderizo la primera vez, esto es mucho mas eficiente ya que el codigo solo se renderiza en el servidor una sola vez y al generar los archivos estaticos estos pueden ser alojados y distribuidos en un CDN lo que los hacen increiblemente rapidos

Una forma fácil de chequear si NextJS está haciendo SSR es yendo a DevTools -> Config -> Debugger(se encuentra hasta abajo de todo) -> habilitar Disable Javascript.
Si sigue renderizando el html es porque se encuentra renderizando desde el servidor. Pueden probarlo mejor en la route /product/loQueSea y se darán cuenta que el HTML lo renderiza pero el llamado al ID no

El SSR es el método en el cual el Servidor manda al cliente (navegador web) el código html listo para que se muestre en pantalla. Esto lo que significa es que el cliente no tiene que gastar computo y tiempo haciendo el proceso de renderizado, si no que ya viene hecho.

Ventajas

  • Permite que la pagina muestre contenido de una manera mucho mas rápida
  • Es bueno para el SEO

Desventajas

  • Si el usuario quiere interacción inmediata, la pagina no lo va a poder procesar, ya que incluso aunque el html venga listo para mostrarse, aun así, el cliente tiene que preparar todo para que la pagina sea interactiva, lo cual también lleva sus milisegundos (dependiendo del dispositivo e internet)
  • El proceso de descargar el js se hace cada vez que se recarga la pagina

.
En conclusión, el SSR es muy útil, ya que nos ayuda a que el usuario no abandone la pagina tan pronto e incluso aunque el SSR tenga sus desventajas, las ventajas son mayores.
.
Les dejo este articulo del creador de Electron y empleado en Walmart Labs en donde habla de como Walmart y Electron utilizan el SSR y como este ha ayudado a mejorar el engagement del e-commerce: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

de echo esta haciendo static site generation no server side, cuando compilasel proyecto lo marca como static, server side es otra configuracion

El SSR envia un html y css prerenderizado hacia el cliente, es decir, ejecuta el JavaScript que incrusta todos estos elementos en el DOM en el servidor y deja las tareas secundarias (como los eventos, fetch, etc) para que se ejecute en el lado del cliente. Por lo que si agregamos un botón a la página About que ejecute un Alert:

import React from 'react';

const About = () => {
  const handleClick = () => {
    alert('clicked!');
  }

  return (
    <>
      Esta es la pagina de about
      <button onClick={handleClick}>Click me!</button>
    </>
  );
}

export default About;

Y deshabilitamos el JavaScript en el navegador, el botón no realizará acción alguna, pero sí se renderizará.

Este fue mi primer acercamiento a SSR, pero me ayudó mucho a ver y entender cómo trabaja la carga de archivos en el navegador 😄

Hay varias maneras de revisar si el contenido viene prerenderizado del servidor. Podriamos hacer un curl a la dirección del servidor y luego examinar si el contenido que se muestra ya viene completo o si hay llamadas de javascript que completan el código html faltante.

curl localhost:3000 > archivo.html

Lo que me lleva a la segunda manera que es abriendo devtools y mirando la pestaña de network para ver examinar las peticiones web que se hacen posteriores al archivo principal.

Pre-rendering -> Next.js crea el HTML por cada pagina lo cual resulta mejor para el SEO. Adicionalmente hay que saber que existen dos métodos de Pre-rendering
1. Static Generation (Recomendado por Next.js) -> El HTML es generado en build time y es reutilizable para cada petición
2. Server-side Rendering: El HTML es generado en cada petición

El SSR (server side rendering), todo viene prerenderizado desde el servidor y permite que la web sea indexable por los motores de busqueda (google).

El pre rendering es impresionante, que genial.

que genial este curso!

#UnderTheHood páginas: pre rendering de páginas

Next JS hace Server Side Rendering.

Nos damos cuenta de esto haciendo click derecho y Ver código fuente de la página, en donde tenemos esto:

<div id="__next">
  <div>
    <h1>Hola Platzi desde Next JS</h1>
    <p>Esto es Hot Realoading y Fast Refresh</p>
  </div>
</div>

Esto nos ayuda con el SEO.

Genial muy util para las apps muy grandes

curl http://localhost:3000 > tesSSR.html 

Revisa el archivo resultante, si esta hidratado entonces esta haciendo server side render.

Pre-renderizado
Next.js procesa previamente cada página. Esto significa que Next.js genera HTML para cada página por adelantado, en lugar de que JavaScript del lado del cliente lo haga todo. La renderización previa puede resultar en un mejor rendimiento y SEO.

Cada HTML generado está asociado con el código JavaScript mínimo necesario para esa página. Cuando el navegador carga una página, su código JavaScript se ejecuta y hace que la página sea totalmente interactiva. (Este proceso se llama hidratación ).

  • Generación estática (recomendada): el HTML se genera en el momento de la compilación y se reutilizará en cada solicitud.
  • Representación del lado del servidor : el HTML se genera en cada solicitud .

https://nextjs.org/docs/basic-features/pages

porque sale en la consola los logs, por eso es server side rendering

Comparto la documentacion respecto a este tema
https://nextjs.org/docs/basic-features/pages#pre-rendering

Hola, una consulta. En estos ejemplos, en realidad se hizo SSR?? Me surge la duda, porque en la terminal todos los pages tienen el símbolo del círculo vacío que es de STATIC.

Desabilitar JS en el browser heheh

Para ver el render del servidor click derecho, Ver código fuente

Next es un amor y super amigable

en la carpeta .next se puede ver la carpeta server y static, tambien los manifiestos.json

Hasta este punto Next.JS y este profe me estan pareciendo un 10/10. Continuando con el curso