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

[@Garajedeideas]

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

[@MarlonBaldovino]

Muchas gracias por el video! Me ha quedado super claro las diferencias y las formas de trabajar de cada uno. Que gran explicación, Gracias.

[@rroblesgo]

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

[@CarlosAzaustre]

Muchas gracias, Ricardo :)

[@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 :)

[@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!

[@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 😅

[@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

[@DollaYoung1]

Excelente video 💡

[@FranzSchnee]

Tremendo, gracias

[@Garajedeideas]

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

[@NicolasPL_]

Brutal la explicación

[@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 😊

[@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!

[@MatiaIbarr]

Muchas gracias! Me aclaraste muchas dudas

[@Garajedeideas]

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

[@helioscamelo]

Excelente, todo un maestro!

[@Garajedeideas]

Gracias! 😊 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!

[@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!

[@codificatufuturo]

excelente !!💙💙💙

[@Garajedeideas]

Gracias! 😊 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?

[@abelsilvasantacruz9584]

Excelente, me encantó. No sabia nada de Next y con esta introduccion siento que podre aprenderlo rapidamente. Por cierto, y esto es desde mi ignorancia. Usar fetch en el servidor en Next no provoca delay en las peticiones?. No seria mejor hacer consulta a la bbdd directamente?. O me pierdo de algun concepto? 😅

[@tony3fk]

Muy aclaratorio!!

[@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.

[@franciscoguevara03]

Excelente explicacion

[@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.

[@Prog111]

Gracias!, quisiera saber si tendrás unas páginas de tutoriales que recomiendes para aprender React, te lo agradeceré mucho. Saludos.

[@beticohernandez9536]

Muy bueno.

[@Garajedeideas]

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

[@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!

[@zeusjean]

Gracias

[@Garajedeideas]

A ti! 😊 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!

[@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?

[@code_castle]

buenisimo

[@Garajedeideas]

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

[@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

[@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 :)

[@andresg9108]

Excelente

[@Garajedeideas]

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

[@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

[@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

[@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?

[@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

[@TACFSQ]

Netxjs vs php please

[@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...

[@TrudeX]

@@vzas280268 x2 XD, parece ser que ese chico es el unico que tiene codigo spaguetti xd