Creamos el mismo proyecto en NextJS y ReactJS para que veas las diferencias

👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento...
En este vídeo te contamos las diferencias entre Next JS y React JS creando el mismo proyecto
Aquí tienes el repositorio: github.com/car...
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
- Cómo integrar Storybook en tus proyectos de React: • Cómo integrar Storyboo...
Este vídeo ha sido hecho en colaboración con ‪@CarlosAzaustre‬ profesor y creador de contenido dev:
/ @carlosazaustre
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas....
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo.

[@Garajedeideas]

👉 ¡En Garaje, seguimos creciendo! Conoce nuestras vacantes actuales: bit.ly/talento-GDI

[@rroblesgo]

Extraordinario artículo!!. Lo haces tan fácil, que da grata impresión visualizarlo. Muchas gracias.

[@CarlosAzaustre]

Muchas gracias, Ricardo :)

[@pw4645]

Conclusion: Next es mas lento pero se puede programar con el backend ahi mismo ya que es SSR (en mi opinion no deberia mezclarse) y es amigable con el SEO. Y React es mas rapido que Next (Cumple con el proposito para el que fue creado FrontEnd nada mas) pero para SEO no es nada amigable y es mas codigo para escribir.

[@your_dev_joselow]

De hecho Next es más rapido justamente por el SSR

[@NicolasPL_]

Qué XDD

[@canaljoseg0172]

Oye creo que puedes emplear ambos casos sin ningún problema en NextJs, y me parece muy justificado proceso. ☺ Yo simplemente haría que ambos mundos convivieran según la necesidad del proyecto. Recordando que esto son requisitos no funcionales (Nosotros debemos tomar la decisión).

[@canaljoseg0172]

@@your_dev_joselow Esto depende de si el proyecto tiende a un comportamiento asintótico muy elevado no sería conveniente, ahora sí tiene muy baja ocurrencia pues sería conveniente. Recuerda que estamos evaluando proceso de indexación del sitio vs la carga de trabajo.

[@NicolasEzequielForni]

es mas rapido lo que pongas en el SSR, pero si tenes todo en el cliente entonces ahi gana React, pero en este ejemplo se. puede ver que Next lo es

[@jmc8707]

Buenisimo, me gustaria que hicieran la misma en REACT y VUE3

[@CarlosAzaustre]

Habrá que hablar con @pablosirera :)

[@Garajedeideas]

Listo, ya lo tenemos: kzbin.info/www/bejne/nZfHqaOKbNGoZtE 😊

[@NicolasPL_]

​@@GarajedeideasBoffff

[@eitanstevengil4215]

Cuando enseñaste el codigo fuente de las paginas para explicar SSV y CSR fue mind blowing, no puedo creer como nunca nadie me lo enseño asi 😅

[@catuva2143]

Excelente, ahora tengo mucho mas claro la forma de trabajo

[@Garajedeideas]

Gracias por tu comentario! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@FacundoMaldonado]

Me quedo mucho más claro como funcionan en CSR y SSR, no conocía esas diferencias cuando empecé a armar un proyecto en mi carrera 🙂

[@CarlosAzaustre]

Me alegro que te sirviese, Facundo :)

[@NagadGames]

Me encantó la introducción, pude entender los conceptos a la perfección!

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)

[@maxidevs]

Buenisimo! Muchas gracias por tal comparación esto ayuda un monton

[@Garajedeideas]

Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@ReVelaO]

perfecto, me aclaró muchas dudas que tenía

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@FranzSchnee]

Tremendo, gracias

[@Garajedeideas]

A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@jdmasoft]

Crackkk gracias por esa explicación tan amena. Un saludo

[@Garajedeideas]

Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@paulbejarano9830]

excelente video, gran explicacion y una duda fuera de esto... como se consigue ese tipo de letra con cursiva en el vscode?

[@mjavint]

Que prefieres para crear tus app en el dia a dia React o Next

[@guillermonarvay8247]

Esperé hasta el final del video para ver con cuál de las dos herramientas se inclinaba al momento de iniciar un proyecto.

[@helioscamelo]

Excelente, todo un maestro!

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@NicolasPL_]

Brutal la explicación

[@SonGoku-pc7jl]

Mut bueno lo de ver las formats en paralelo

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@MatiaIbarr]

Muchas gracias! Me aclaraste muchas dudas

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@codificatufuturo]

excelente !!💙💙💙

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@franciscoguevara03]

Excelente explicacion

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@mauri43878]

Buenisimo!!

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@canaljoseg0172]

Oye me parece que hasta este punto es relativo 9:49, pues me estas diciendo que la render ejecuta mediante una js en React, y no mediante código html. Siempre cuando me consigo con estas ciertas implicaciones, me dijo a mismo que esto no puede ser, por lo cual haría que React me de el html. Esto puede ser que se haga mediante un librería de tercero, o en el mismo React. Por lo cual vuelvo a decir ¡ Esto es relativo ! Lo que veo de Next es que tiene funciones encapsuladas, por lo cual simplifica la funcionalidad asíncrono del response de servicio. ¿Acaso no puede tener un clase parecida a NextJS? o Podría suponer que React no espera el post load y si no que va actualizando los datos a medida que presenta los datos ósea no asíncrono (como una promesa), por lo cual sería más rápido que NextJs.

[@CarlosMolina-iy7pc]

Todo bien, excepto que los tiempos de compilación durante el desarrollo son altísimos en Next Js, comparando con React Vite. Nunca pude soportar esa limitante, ni usando turbo. Hay alguien que haya superado esa pesadilla de programar con Next js?

[@beticohernandez9536]

Muy bueno.

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@noelmonterroso7970]

En un caso práctico para crear un proyecto de un CRM o backoffice, ¿recomendarían utilizar React con Vite o Next.js 14 para el frontend?

[@claudiodesiderio79]

Algun consejo de q es mas conveniente? Porq si con nextjs se lleva todo el proceso al server, los gastos de hosting seran mayores que si el proceso se hace en el cliente, no?

[@zeusjean]

Gracias

[@Garajedeideas]

A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@code_castle]

buenisimo

[@Garajedeideas]

Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@sanD-xq8nb]

8:10 "hacemos la peticion de los datos antes de que se envien a la pagina.." o se hace la peticion antes de que se cargue la pagina. O sea con Next se hace el carga de la pagina recien cuando se tienen todos los datos pedidos al server?

[@jesusgastelum7652]

Tengo entendido que se hace la peticion del lado del servidor y se envia el componente al navegador ya que con la peticion hecha y renderizada.

[@feliblanco9120]

Eso es lo que me pregunto, porque se supone que renderiza todo junto, o sea, tiene que esperar a obtener los datos para que mande el renderizado de la pagina, entonces si una API tarda en responder tambien tarda en cargar la pagina ENTERA? (o se soluciona separando por componentes? eso podria ayudar un poco), con react lo veo mas facil, cargas la pagina (mostras aunque sea un loading) mientras se carga los datos, pero algo motrás

[@lucaszorzin6034]

@@feliblanco9120En Next sí está la posibilidad de mostrar un loading mientras se están obteniendo los datos del servidor. Podes crear un archivo llamado loading.jsx, es realmente muy útil y fácil de implementar 🚀

[@jocarrd]

​@@feliblanco9120 nextjs también te permite prerendirizar una pagina web y posteriormente iniciar un streaming de datos en el que te irá devolviendo los datos de las peticiones que estén haciéndose en el back, así te aprovechas del SEO de aquellos datos que puedan pre-renderizarse y además realizas una carga diferida de datos para que la página no espere tanto

[@jocarrd]

Para ello tiene un componente llamado Suspense, que es como el loading que se muestra en react 😊

[@rey-vc9ge]

Q ventajas tiene hacer componentes en el cliente en next js? Tiene mejoras el rendimiento o es para demostrar q se puede? hacer?

[@juliantibana7657]

Usar componentes de cliente en nextJS se hace para poder usar los hooks que tiene react, pero si se requiere rendimiento es mejor vanilla react. En un benchmark (de SSR) reciente se vio que next es hasta 170 veces más lento que vanilla react 🤙🏽

[@pablorostirolla5859]

@@juliantibana7657 Asi es, me sorprendió ver que Next es mucho mas lento que React Vanilla

[@andresg9108]

Excelente

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@GerunMatt]

A mi por el momento no me termina de convencer Next.js. Tiene mucha magia por debajo que me hace perder el control de todo lo que estoy haciendo. Por el momento me sigo manejando con React.js puro y mis propias configuraciones: ESBuild, Webpack, Vite.js, Parcel, etc..

[@crr4141]

Eres de los. Mongoles q cuanto más complejo más aumenta su ego reinventar la rueda en vano

[@88goeth]

Wakala, React puro es puro pero puro código spaghetti, lo que naturalmente genera 3 veces más código

[@GerunMatt]

@@88goeth antes todo el mundo usaba react puro y nadie se quejaba .. ahora de golpe se volvió malo jajaja .. de todas manera no voy a negar que hay que cambiar, pero no me siento obligado a cambiar ya mismo solo por moda

[@jfelipeq14]

Como se podria hacer la api desde el mismo next?

[@Garajedeideas]

Hola! Tienes el repo del vídeo en la descripción del vídeo dónde te viene la parte de Nextjs. Igualmente, tenemos otro vídeo de como crear una API Rest paso a paso con NextJS por si lo prefieres: kzbin.info/www/bejne/oGPXZqGBiJuIrJo y aparte te dejamos la playlist con todos los vídeos de NextJS que tenemos en el canal: kzbin.info/www/bejne/qIC9iJeufrpml7c

[@88goeth]

React puro es un sabroso plato de spaghetti!

[@vzas280268]

Si sos un buen programador, no deberías realizar código spaghetti con ningún lenguaje de programación...