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

Подписаться 43 тыс.

Просмотров 21 тыс.

50% 1

👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento-tech-GDI
En este vídeo te contamos las diferencias entre Next JS y React JS creando el mismo proyecto
Aquí tienes el repositorio: github.com/carlosazaustre/rea...
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.com/livecoding/...
----------
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.

Наука

Опубликовано:

22 апр 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

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

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

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

@jmc8707 Месяц назад

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

@CarlosAzaustre Месяц назад

Habrá que hablar con @pablosirera :)

@Garajedeideas Месяц назад

Listo, ya lo tenemos: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gfdxpT7lu0o.html 😊

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

@MatiaIbarr 14 дней назад

Muchas gracias! Me aclaraste muchas dudas

@Garajedeideas 12 дней назад

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!

@NagadGames 27 дней назад

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

@Garajedeideas 16 дней назад

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

@mauri43878 Месяц назад

Buenisimo!!

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

@kamscomputers Месяц назад

excelente !!💙💙💙

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

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

@code_castle Месяц назад

buenisimo

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

@andresg9108 28 дней назад

Excelente

@Garajedeideas 16 дней назад

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

@noelmonterroso7970 29 дней назад

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 14 дней назад

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?

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

@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

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

@88goeth 20 часов назад

React puro es un sabroso plato de spaghetti!

@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 20 часов назад

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

@GerunMatt 12 часов назад

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