Construir una web app con React no es fácil

Valor agregado de Next.js:

1. Un sistema de enrutamiento intuitivo basado en páginas (con soporte para rutas dinámicas)
2. La representación previa, tanto la generación estática (SSG) como la representación del lado del servidor (SSR) son compatibles por página
3. División automática de código para cargas de página más rápidas
4. Enrutamiento del lado del cliente con captura previa optimizada
5. Compatibilidad con CSS y Sass incorporada, y compatibilidad con cualquier biblioteca CSS-in-JS
6. Entorno de desarrollo con soporte Fast Refresh
7. Rutas de API para crear endpoints de API con funciones sin servidor
8. Totalmente ampliable

Gracias profesor

Escuché aguacate y vine corriendo.

Mis apuntes del curso

Hechos con 💚

Vamos con este curso de Next, Yeeeeeeeeeeeeeeeee!!!

Diferencias entre CSR y SSR:

/
Hola a todos les quiero compartir este aporte de informacion que recolecte, este tema es importante de saber a detalle para saber que es exactamente Next.js para asi usarlo de la mejor manera, espero les ayude.
/
Al solicitar alguna página web, existen 3 formas principales en las que el navegador procesa una determinada respuesta del servidor para mostrar el contenido enviado, estas tres formas son:
/
CSR (Client Side Rendering): significa que el cliente, es decir el navegador, va a renderizar casi toda la página web por sí mismo, exactamente, lo que ocurre es:
/

1. El servidor donde está toda la información de nuestra web, sólo envía un simple archivo HTML que sólo contiene la estructura básica y los enlaces que permiten al navegador acceder a los archivos JS y ejecutar el Frontend Framework que utilizamos.
   /
2. El navegador recibe el archivo HTML, pero lo único que realmente le importa es descargar los archivos JS y ejecutar el Frontend Framework que utilizamos después, para que empiece a crear la página web de forma 0.
   /
3. Una vez que la página web está completamente generada, el navegador la muestra, y el usuario puede utilizarla, en el caso de que la información que muestra el sitio web deba ser actualizada o modificada, la página se comunica con el servidor por API.
   /

Ventajas del CSR:
/

• Ideal para aplicaciones web.
  /
• Renderización rápida del sitio cuando se necesita cambiar después de la primera vez que se carga la página.
  /
• Proporciona un buen rendimiento si la página tiene muchas interacciones.
  /

Contras de CSR:
/

• No conduce a un buen CEO.
  /
• Carga lenta la primera vez que se entra en la página.
  /
• Consume mucha potencia informática del dispositivo del cliente.
  /
• Hoy en día CSR es lo que utilizan las SPA para ser generadas en el navegador.
  /
  /

SSR (Server Side Rendering): implica que el navegador sólo generará unas partes de toda nuestra web, concretamente lo que ocurre es:
/

1. El servidor donde está toda la información de nuestra web, envía un archivo HTML completo que contiene la mayor parte y recursos (imágenes, vídeos, etc) de nuestra web y los enlaces que permiten al navegador acceder a los archivos JS y ejecutar el Frontend Framework que utilizamos.
   /
2. El navegador recibe el archivo HTML y lo renderiza, pero la página web mostrada no es interactiva, por lo que el navegador también descarga los archivos JS y a partir de ahí ejecuta el Frontend Framework que utilizamos, de forma que la página web ya es interactiva.
   /
3. Una vez que la página web está completamente generada, el navegador la muestra, y el usuario puede utilizarla, si la información que muestra la página web necesita ser actualizada o modificada, la página comunica al servidor que necesita cierta información nueva, por lo que el proceso se repite y el servidor envía un nuevo archivo html que el navegador lee y que tiene archivos js enlazados para ser ejecutados por react también, pero ahora el archivo html tiene la nueva información solicitada.
   /

Pros de SSR:
/

• Ideal para sitios estáticos
  /
• Carga rápida para la primera vez que se entra en la página
  /
• Bastante bueno para el SEO
  /

Contras de SSR:
/

• Requiere recargar la página cada vez que se solicita nueva información y cuya velocidad no es muy rápida.
  /
• La página es más propensa y vulnerable a problemas de seguridad.
  /

SSR es el comportamiento por defecto de la web, ya que esta como siempre recarga la página cuando se solicita una información determinada del servidor, pero con el paso del tiempo se desarrollaron las SPAs, pero para mejorar el SEO las SPAs tienen, esta nueva forma de renderizar las páginas web la cual es SSR que si en caso de que uses React.js, la mejor opcion es hacerlo usando el framework Next.js.

¿El profe es re Paisa o me equivoco?

Total cost of ownership, Costo total de inversion en el tiempo de mantener el framework

Este será un curso a 1.25

Total cost of ownership esto cabe tambien destacar el valor agregado del tiempo invertido para el desarrollo

¿Como que palta? XD

Siii! Next!

Seria super fino hacer esto de los aguacates pero con arepas 😋

Vayan apuntándose a la conferencia de Next.js de este año. 👀

🏗️ Construir aplicación web con React no es fácil

Total cost of ownership.- es ¿Cuanto le vale a tu empresa el tiempo que gastas en mantener el framework que tú misma/o creaste? Como mantener el código o la arquitectura de la aplicación

Pensar en las tecnologías a usar como ser css, webpack, babel, Rollup, Babel y como integrarlos, pensando solo en el desarrollo, dejando preguntas como:

• ¿Como lo llevaremos a producción?
• ¿Es optimo el bundle?

Estas preguntas que son tan decicivas y parecen faciles se les llama “Total cost of ownership”

• ¿Sera que tus usuarios se enfoquen en que tu arquitectura sea compleja?
• Los usuarios notaran algún cambio cuando se lucha días con las dependencias o que React este funcionando con la ultima versión

Para la gran mayoría de los casos como el 90%, hay que enfocarnos en brindar dar valor a nuestro proyecto, a la empresa. El tiempo lo deberíamos invertir pensando en esta idea y no lidiando con la arquitectura o framework que nosotros debemos construir.

React tiene una ventaja la cual es que es una librería, la cual nos deja construir el entorno en donde vamos a operar pero igual es una debilidad pero eso implica una debilidad la cual es que no podemos saber cual es el entorno correcto.

Es ahí donde entra frameworks como Next.js, el cual ya esta pensado en crear productos de las formas más optimas posibles agregando valor a nuestro producto. Dejándonos pensar solo en el desarrollo y no tanto en este tipo de decisiones.

RESUMEN: Next.js nos hace enfocar en el desarrollo del producto dejando de lado decisiones que no agregan este valor como ser la arquitectura de la aplicación

Superrrrr, vamos a darle Devs.

Esperando este curso alla vamos NEXT.JS 😃

Genial! Estaba esperando este curso. Emocionado.

Estaba esperando este curso, Gracias!!!

Excelente cursaso, vamos por ello

Sé que voy a aprender mucho con este curso.

Estaba esperando este curso ya diaaas muchas gracias allá vamos! 😄

con todo …

Si un profesor es capaz de combinar desarrollo web con aguacates, entonces es un curso que vale la pena.

Wow qué introducción!

Excelente introducción… me apunto!!

Normalmente cuando un profesor habla muy pausado, suave y bajito, da deseos de dormir, pero Jonathan despierta seguridad.

Construir una web app con React no es fácil

Total cost ownership: ¿Cuánto le vale a tu empresa el tiempo que gastas en mantener el framework que tú mismo/a creaste?

Si en lo que inviertes la mayoría de tu tiempo no agrega valor a tus usuarios, tal vez no estés enfocado en lo correcto.

Next.JS es el framework de React para producción.

Next JS in 100 seconds

Página oficial de Next JS

Apuntes de alguna persona

No se pierde el SPA
esto es algo que me tenia preocupada, pero en realidad despues de que se carga el index se empieza a comportar como SPA y el performance 🚀🌕

✨ Total cost of ownership

Costo de la inversión del tiempo en mantener el proyecto a través de un framework.

con las pilas puestas.

Excelente profesor, me alegra que el sea quien imparta el curso.

Hola, si eres como yo y quieres saber que es lo minimo que se necesita para este curso la respuesta es React, Typescript y Node. Nos vemos de nuevo cuando dominemos todo esto.

Juasss, después de haber pasado semanas batallando con webpack , sus configuraciones y las dependencias que se han actualizado, me encuentro con esta introducción… No se si reir o llorar… jajajja mejor me rio…

Esto se escucha como una herramienta súper útil 😮
A darle con toda al curso! 😄

Que guapo está compadre! hahahaahah

A mi me ha causado un monton de problemas Next, si quieres hacer una custom API la configuracion cambia y hacer deploy es casi imposible. Si quieres hacer una peticion a una API externa tambien se tiene que configurar cors. Luego tambien es mucho de hacer serverless que son cosas avanzadas. Se ve que si sabes bien usar Next es muy util pero al curso le falta bastante contenido que debería explicar, yo lo queria usar para hacer una simple landing page y para nada me ahorro tiempo

En el momento de desarrollar alguna aplicación de software, hay muchas preguntas y problemas que deben resolverse antes de comenzar a codificar.
Uno de los mayores problemas o situaciones que necesitamos resolver antes del código, es nuestra arquitectura, cómo vamos a construir nuestra aplicación y lo más importante, cómo vamos a entregar nuestro software a nuestros usuarios, necesitamos identificar lo que necesitamos. y lo que no necesitamos.
La parte importante de este proceso es identificar qué necesitamos para construir nuestra aplicación y cómo eso afecta el punto de vista del usuario sobre nuestro software.

Todas estas preguntas requieren mucho tiempo pensando en nuestro software y su desarrollo.
Entonces, para ahorrar ese tiempo, existen los frameworks que son entornos de trabajo que ya están construidos para comenzar a hacer código.
En este caso vamos a ver Next.Js, que es un framework de React para hacer nuestras aplicaciones web con SSR que nos ayudará mucho para nuestra etapa productiva de nuestra aplicación.

Next fue creado para Vercel que ya identifica los problemas más comunes a la hora de construir alguna aplicación web real y hacerlas productivas y útiles en el mundo real.

Buena intro! Vamo’a ver cómo se viene el resto. Voy por un guacamole mientras…

Tengo mas de 2 años trabajando con Next.js (y Nuxt.js) y la verdad es que son frameworks que agilizan mucho y agregan bastante valor.

Estoy aqui solo para ver en funcionamiento las ultimas features de next y OJALA que hablen algo de performance.

Vamos!

Interesante aprender más herramientas útiles para trabajar con React.

Luego de hacer el curso de optimizacion, me dan muchas ganas de terminar esto 😄

Que buena introducción del curso.

Wow, es el vídeo introductorio mejor planteado que he visto. Desde la creación de un proyecto las preguntas iniciales que el profe hace son realmente relevantes… Más cuando estamos acostumbrados a usar herramientas y nos toma bastante tiempo configurarlas ¿Realmente le da un valor agregado a nuestros clientes?

Normalmente a las empresas en México no les importan las buenas prácticas, pero no todas son así y se agradecen estos aportes

Está genial! Justo me estaba haciendo todas estas preguntas que planteó el profesor, ahora que estoy empezando a usar NextJS puedo enfocarme en dar valor usando el principio de Pareto 80/20, donde el 20% del esfuerzo puede representar el 80% de resultados o en este caso el valor brindado.

Acaba de salir la nueva versión de NextJS su versión 10. Pueden verlo en nextjs