Crear aplicaciones React requería en sus inicios conocimientos de Webpack y de Babel hasta para el más simple “hello world”. Afortunadamente, al día de hoy nos podemos concentrar únicamente en la librería sin necesidad de pensar en todo lo que hay por debajo.
Las dos formas más populares de hacerlo es usando create-react-app o Next.js.
En este blogpost vamos a describir las principales diferencias entre ambas opciones, sus ventajas y limitaciones
create-react-app fue la primera librería en hacer las cosas fáciles en React. En su núcleo, hay una librería de los mismos autores llamada react-scripts encargada de la magia para que todo funcione como debe.
Una nueva aplicación se crea con el comando:
npx create-react-app platzi-app
Además de crear los archivos iniciales y toda la configuración para que React funcione, create-react-app trae un servidor de desarrollo que estará escuchando los cambios de nuestros archivos para actualizar la página de forma instantánea. #UnderTheHood create-react-app utiliza Webpack Dev Server con React Fast Refresh (v4+).
⚠️ Para producción create-react-app compilará una app optimizada para ser usada únicamente desde el lado del cliente. No hay capacidades de server-side rendering.
Llega un momento en las aplicaciones en que debes ajustar las configuraciones de Webpack, Babel o PostCSS para lograr algo. CRA ofrece el modo eject (expulsar) que te dará acceso a toda la configuración de estas librerías.
Si bien se puede ver como una ventaja, también se convierte en un arma de doble filo.
Por un lado tienes todas las configuraciones a tu control, pero por el otro ya no seguirás recibiendo actualizaciones de “react-scripts” y de las nuevas configuraciones de Webpack y su familia.
⚠️ Al momento de expulsar no hay vuelta atrás y ahora todo el mantenimiento es nuestra responsabilidad.
CRA produce archivos estáticos HTML – también conocido como aplicación client-side – que podemos subir a cualquier servidor; desde GitHub Pages hasta Netlify, Vercel y Amazon Web Services.
Este tipo de aplicaciones son las más fáciles de hacer deploy ya que no requieren backend.
Por otra parte, al tener únicamente la posibilidad de hacer client-side rendering, nos perdemos de grandes beneficios como:
No hay más opción que enviar más archivos JavaScript para que descargue el cliente para cada característica que nuestro sitio necesite. Esto impacta la Experiencia de Usuario, la mantenibilidad del proyecto, y brinda más preocupaciones sobre seguridad como almacenamiento de tokens en el cliente
Next.js es considerado al día de hoy como el framework más popular de React. Podríamos pensar en éste como un Create React App más:
Una nueva aplicación se crea con el comando:
npx create-next-app
Además de hacer muy fácil y transparente todo el trabajo con React y cambios instantáneos en el navegador, Next.js hace el trabajo con páginas algo que no se debe pensar.
Todas nuestras páginas en producción ya habrán pasado por procesos de code-splitting y tree-shaking produciendo únicamente el JavaScript mínimo que necesitan para funcionar.
En Next.js no existe tal cosa como expulsar. Sin embargo, eres libre de sobreescribir toda la configuración de Webpack, Babel, PostCSS o el mismo servidor de Node.js si así lo necesitas.
Así te sigues beneficiando de las actualizaciones de Next.js, lo cual es muy importante y comúnmente subvalorado en equipos pequeños. El costo de mantenimiento es mucho menor que con CRA.
El costo que Next.js trae para brindarnos todos los beneficios de Server-side y generación estática se refleja en el hecho de que ahora necesitamos un servidor de Node.js para realizar su deploy.
Una buena noticia es que cualquier servidor que soporte Node.js podrá ser usado.
Otra mejor noticia es que Next.js también nos ofrece un modo de exportación, que permite crear archivos estáticos HTML tal como si fuera con Create React App.
Gracias a sus diferentes modos de data-fetching y de renderización, obtenemos todo el poder del servidor que nos brinda una increíble flexibilidad y un abanico más grande de soluciones para brindar la mejor experiencia a nuestros usuarios.
Next.js no te hace elegir entre una cosa y la otra. Con Next.js puedes combinar una o varias formas por página para llevar tus aplicaciones a otro nivel.
A menos que tengas una razón muy buena para usar Create React App, como que nunca necesitarás un servidor y que esto podría estorbarte, Next.js debería ser tu primera opción.
Te invito a tomar la saga de cursos de Next.js que hemos preparado para ti. No solo aprenderás los fundamentos de Next.js, sino también cómo integrarlo con otras herramientas, arquitecturas y flujos de desarrollo para crear aplicaciones web profesionales:
¡Nunca pares de aprender JavaScript!
Ya se lo que voy a hacer despues del js challenge😎👍
pd: sus clases me encantan profe🤙
Muchas graciiaaaaaas! @san_kiago! 😄
Tengo una duda, ¿Es necesario o recomiendan aprender React antes que Next.js? No me quedó claro si podría comenzar directo con Next.js o es algo mas avanzado.
Next JS es un framework de React. Por lo tanto si no sabes React no se te va a decir trabajar con Next.
Mi recomendación es aprender primero React, esto dado que en un trabajo pueden trabajar con React puro, o Gatsby.
Entonces es mejor que tengas una visión general de como se trabajar con React, y ya con eso claro si puedas entrar en Next y saber aprovechar las herramientas y facilidades que ofrece con respecto a create-react-app 😃
Super, te lo agradezco @jeaespejogo 😃
Un nuevo tema que aprender, me encanta mucho el tema
Cuando termine la escuela de JavaScript, Next.Js voy por ti 😄 Gracias por este post.
Epaaa con toda!
Yo tenía la duda con CRA, pero este post me dio la respuesta. Gracias.
Heyy genial! 😄
Le echaré un vistazo, gracias.
Adelante Bryan, nos cuentas como te fue!