Creamos el mismo proyecto en NextJS y ReactJS para que veas las diferencias
HTML-код
- Опубликовано: 6 сен 2024
- 👉 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.
👉 ¡En Garaje, seguimos creciendo! Conoce nuestras vacantes actuales: bit.ly/talento-GDI
Extraordinario artículo!!. Lo haces tan fácil, que da grata impresión visualizarlo. Muchas gracias.
Muchas gracias, Ricardo :)
Buenisimo, me gustaria que hicieran la misma en REACT y VUE3
Habrá que hablar con @pablosirera :)
Listo, ya lo tenemos: ruclips.net/video/gfdxpT7lu0o/видео.html 😊
@@GarajedeideasBoffff
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.
De hecho Next es más rapido justamente por el SSR
Qué XDD
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 😅
Excelente, ahora tengo mucho mas claro la forma de trabajo
Gracias por tu comentario! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
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 🙂
Me alegro que te sirviese, Facundo :)
Brutal la explicación
Me encantó la introducción, pude entender los conceptos a la perfección!
Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)
Buenisimo! Muchas gracias por tal comparación esto ayuda un monton
Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Tremendo, gracias
A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Crackkk gracias por esa explicación tan amena. Un saludo
Gracias a ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Que prefieres para crear tus app en el dia a dia React o Next
Esperé hasta el final del video para ver con cuál de las dos herramientas se inclinaba al momento de iniciar un proyecto.
perfecto, me aclaró muchas dudas que tenía
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Mut bueno lo de ver las formats en paralelo
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
excelente video, gran explicacion y una duda fuera de esto... como se consigue ese tipo de letra con cursiva en el vscode?
excelente !!💙💙💙
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Excelente, todo un maestro!
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Excelente explicacion
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Buenisimo!!
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Muchas gracias! Me aclaraste muchas dudas
Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Muy bueno.
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
buenisimo
Gracias! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
Gracias
A ti! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!
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?
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?
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?
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.
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
@@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 🚀
@@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
Para ello tiene un componente llamado Suspense, que es como el loading que se muestra en react 😊
Q ventajas tiene hacer componentes en el cliente en next js? Tiene mejoras el rendimiento o es para demostrar q se puede? hacer?
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 🤙🏽
@@juliantibana7657 Asi es, me sorprendió ver que Next es mucho mas lento que React Vanilla
Excelente
Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)
Como se podria hacer la api desde el mismo next?
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: ruclips.net/video/j2t5nKS6Uv8/видео.html y aparte te dejamos la playlist con todos los vídeos de NextJS que tenemos en el canal: ruclips.net/video/rOZWdxIU3aU/видео.html
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..
Eres de los. Mongoles q cuanto más complejo más aumenta su ego reinventar la rueda en vano
Wakala, React puro es puro pero puro código spaghetti, lo que naturalmente genera 3 veces más código
@@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
React puro es un sabroso plato de spaghetti!
Si sos un buen programador, no deberías realizar código spaghetti con ningún lenguaje de programación...