#UnderTheHood setup y páginas: optimizaciones ocultas

Una de las mejores cosas que trae next por defecto es este tipo de configuración para producción, tanto el manejo de assets como la generación de bundles y por sobre todo su sistema de SSR y Prefetching de los componentes de cada página.

hahaha cuando revise la persona del curso de optimizacion del curso

Ah pero mira, Next.js es el APACHE de React. ❤️

Optimizacion de Archivos

/
Next.js tiene como objetivo ayudarnos a crear aplicaciones React evitando que nos preocupemos por cosas que no debemos hacer. Y también optimizando el código que creamos cuando se compila. Así, una de las maneras en que Next.js hace posible la optimización del código es utilizando Code Splitting en lugar de hacer JS Bundles. Vamos a explicar cada uno de ellos a fondo:
/

• JS Bundles: Es la forma más común de optimizar el código. Consiste en juntar todo el código que hicimos en un solo archivo JS. De tal manera que se reduce y optimiza para que el archivo principal tenga menos bytes que todos los archivos juntos sin compresión y optimización. De este modo, el servidor sólo enviará un único archivo, y el navegador renderizará la página más rápidamente. JS Bundler es utilizado por herramientas como webpack, Gulp, entre otras. Pero el inconveniente de hacer bundles. Es que si la aplicación que estamos creando es muy compleja o tiene demasiados archivos, hacer JS Bundles será ineficiente a medida que pase el tiempo, debido a que muchas veces el navegador recibirá código que ni siquiera necesita.
  /
• División del código: Es un nuevo método utilizado por herramientas de desarrollo como Next.js para solucionar los problemas que tiene hacer JS Bundles. Este nuevo método se basa en la premisa de que en lugar de fusionar todo el código en un solo archivo. Debemos identificar las partes o secciones de código que se repiten en un determinado archivo. Extraerlas después del archivo original. A continuación, ponerlo en otro archivo, y por último comprimirlo y optimizarlo para que tenga menos archivos que el original. Este proceso debe repetirse para cada archivo dentro de la carpeta de páginas que tengamos. De esta manera, tendremos muchos archivos. Pero la ventaja de hacerlo. Es que sólo enviaremos al navegador las partes de código que necesita para renderizar una página concreta. A saber, cada uno de los archivos que tendrá el navegador, se llaman chunks.
  /
  Los chunks se caracterizan por su estructura y por la forma de nombrar cada uno de ellos.
  /
  Por ejemplo. Normalmente, los chunks se nombran de esta manera:
  /
  
  
  /
  Y contienen el siguiente código:
  /
  
  
  /

La forma en que podemos observar la forma en que Next.js realiza la división del código utilizando nuestro código es:
/

1. En primer lugar, ejecutar el comando npm run build (o yarn dev si usas yarn).
   /
   /
   
   /
2. Verás que te muestra un output extensa, y en esa misma salida, están todos los chunks que Next.js hizo.
   /
   
   
   /
3. Debajo de los chunks mostrados, hay una leyenda que nos dice que en cuanto el navegador reciba los chunks que Next.js hizo Serán renderizáados como archivos HTML. Y eso es muy importante, ya que eso significa que nuestro sitio web se renderizará rápidamente. Y que por el hecho de que el navegador reciba los archivos HTML directamente, nuestra calidad SEO aumentará.
   /
   
   
   /
4. Abre tu navegador. Siguiendo así. Habilitar la opción de inspección. A continuación, seleccione la opción de red. Volver a cargar la página después. Y si analizamos los archivos mostrados, nos daremos cuenta de que son los mismos archivos (probablemente van a aparecer más archivos) que fueron mostrados en la terminal por Next.js anteriormente.
   /
   
   
   /

El hecho de que Next.js haga la división del código, tiene todo el sentido. Debido a que Next.js es para el renderizado del lado del servidor (SSR) y la división del código es bastante útil para el tiempo de carga y el buen SEO.

🔍 Under The Hood: Optimizaciones ocultas en las paginas y Pre rendering de páginas

chunk.- pedazo de código

CSR.- Client Side Rendering

SSR.- Server Side Rendering

"scripts": {
    "dev": "next", // desarrollo
    "build": "next build", // build prod
    "start": "next start" // server prod
},

Al momento de compilar separa el código con la técnica code splitting. Ademas de aplicar hashes a los assets. Ademas que para cada pagina generara un chunk especifico y mantendrá el código que se usara durante toda la aplicación

Podemos ver que las paginas generadas son SSR dándonos más SEO que con CSR

RESUMEN: Next.js aplica al bundle final diferentes optimizaciones como ser vendor files que hacen que no nos preocupemos de la configuración del proyecto. Ademas que nos da un mejor SEO por el server side rendering

npm run-script build 

Jajajajaja, del curso de optimizacion web: “que lo da otra persona, que me encanta muchisimo”.
Que campeón Jonathan!!! 👏 😂
Me hiciste reir un rato!

Esas referencias al genial curso de optimización web.

I_see_you_are_a_man_of_culture_as_well.jpg

Esto esta muy bonito. Ya tengo experincia con Next por mi trabajo pero en estos cursos uno siempre aprende cositas interesentantes que le ayudan a entender mejor las cosas por debajo. Excelente profe 👍✨

No se si esto le sirva a alguien pero a mi me a paso.
En la carpeta pages, si haces exportaciones nombradas tipo:

export { ComponentName };  

generara error al momento de correr yarn build.
usa exportaciones por defecto, para evitar errores, como:

export default ComponentName;

#UnderTheHood setup y páginas: optimizaciones ocultas

"scripts": {
  "dev": "next",
  "build": "next build", // build para producción
  "start": "next start" // servidor en node para producción
},

Si ejecutamos npm run build con lo que tenemos hasta ahora:

Page                             Size     First Load JS
┌ ○ /                            323 B          67.3 kB
├ ○ /404                         194 B          67.2 kB
├ ○ /about                       288 B          67.3 kB
└ ○ /product/[id]                340 B          67.3 kB
+ First Load JS shared by all    67 kB
  ├ chunks/framework.b97a0e.js   42 kB
  ├ chunks/main.8d1561.js        23.3 kB
  ├ chunks/pages/_app.1a580d.js  979 B
  └ chunks/webpack.49d04e.js     690 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

Next prepara nuestro sitio para producción y le asigna a cada página su ‘chunk’ (su parte necesaria para que funcione correctamente).

Esto está bastante optimizado con code splitting.

Next.js divide su JavaScript en partes separadas para cada ruta. Cuando los usuarios cargan su aplicación, Next.js solo envía el código necesario para la ruta inicial. Cuando los usuarios navegan por la aplicación, obtienen los fragmentos asociados con las otras rutas. La división de código basada en rutas minimiza la cantidad de scripts que deben analizarse y compilarse a la vez, lo que da como resultado tiempos de carga de página más rápidos.
fuente: https://web.dev/i18n/es/code-splitting-with-dynamic-imports-in-nextjs/

es una linea mas de codigo pero es mas descriptivo para los que no tiene tanta experiencia

 const router = useRouter();
  const {
    query: { productId },
  } = router;```

Chunk: Cada seccion o parte minima que le carresponde a cada pagina en especifico

comparto una extensión que ayuda mucho en el desarrollo con React y tambien indica cuando estamos en modo desarrollo o producción React Developer Tools

alguno tiene el prolema de queno funciona el hot reload??

Para los que usan WLS2, cuando intente ejecutar el comando “start” me salio el siguiente error:

Error: listen EADDRINUSE: address already in use 0.0.0.0:3000
    at Server.setupListenHandle [as _listen2] (node:net:1485:16)
    at listenInCluster (node:net:1533:12)
    at doListen (node:net:1682:7)
    at process.processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'EADDRINUSE',
  errno: -98,
  syscall: 'listen',
  address: '0.0.0.0',
  port: 3000
} 

Buscando en google un poco encotre la solucion en esta web:

Espero les sea de utilidad.

Viene con lazy loading por defecto omg, aprende angular

Me encantan tus clases y claro que me encanta la persona que dicta el curso de optimización ✨

yo lo corri con

npm run build

Ahorra muchas configuraciones y no es como un create-react-app, excelente opción