64

Create React App vs. Next.js | Herramientas para crear aplicaciones web con React.js

4784Puntos

hace 2 meses

Curso de Next.js
Curso de Next.js

Curso de Next.js

Next.js te da la mejor experiencia de desarrollo en React.js con todas las características que necesitas para producción como Client Side Rendering, Server Side Rendering, Generación de Sitios Estáticos (ESG) y hasta despliegues a producción automáticos con Vercely. Aprende esto y comienza a crear sitios web profesionales listos para despliegue sin complicarte con configuraciones tediosas.

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 (CRA)

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
Create React App

Experiencia de desarrollo con CRA

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.

Personalización avanzada con CRA

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.

Deploy con CRA

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.

Server-side Rendering, internacionalización y autenticación con CRA

Por otra parte, al tener únicamente la posibilidad de hacer client-side rendering, nos perdemos de grandes beneficios como:

  • La aplicación no será renderizada desde el servidor ni de forma estática, en cambio, únicamente después de que se ejecute JavaScript en el navegador lo cual impacta altamente el SEO.
  • Nuestras posibilidades para Internacionalización, autenticación y para cualquier otra cosa están limitadas al cliente.

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

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 capa de routing para crear páginas listas para producción.
  • Server-side rendering de primero.
  • Componentes para optimizar Imágenes, carga de Scripts y de prefetching de páginas.

Una nueva aplicación se crea con el comando:

npx create-next-app
Next.js

Experiencia de desarrollo con Next.js

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.

Personalización avanzada con Next.js

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.

Deploy con Next.js

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.

Server-side Rendering, internacionalización y autenticación con Next.js

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.

  • ¿Quieres que una página se renderice desde el servidor mientras que otra se haga de forma estática y otra solo en el cliente?
  • ¿Qué tal dividir nuestra estrategia de internacionalización por rutas y cargar únicamente las traducciones necesarias desde el servidor?
  • O, hablando de seguridad, ¿por qué no utilizar el poder del servidor para crear cookies con access tokens que solo el cliente no pueda leer para manejar nuestra sesión de autenticación?

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.

Conclusiones

  1. Create React App nos permite crear aplicaciones únicamente client-side, mientras que Next.js permite aplicaciones híbridas con server rendering, static e incremental generation.
  2. Next.js necesita de un servidor con Node.js para funcionar en producción. Aunque con su opción de exportar lograremos el mismo efecto de Create React App.
  3. Gracias a que tenemos el poder de un servidor, podemos optimizar mucho más nuestro sitio para brindar una mejor experiencia.
  4. Next.js provee más características que Create React App que generalmente son necesarias en cualquier aplicación, lo que reduce el costo de mantener una aplicación a lo largo de los años.
  5. Si quieres crear tu primera aplicación con React, Next.js te lo hará más fácil.

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!

Curso de Next.js
Curso de Next.js

Curso de Next.js

Next.js te da la mejor experiencia de desarrollo en React.js con todas las características que necesitas para producción como Client Side Rendering, Server Side Rendering, Generación de Sitios Estáticos (ESG) y hasta despliegues a producción automáticos con Vercely. Aprende esto y comienza a crear sitios web profesionales listos para despliegue sin complicarte con configuraciones tediosas.
Jonathan 🦑
Jonathan 🦑
jonalvarezz

4784Puntos

hace 2 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
7
2210Puntos

Dejo mi aporte y les recomiendo Vite.js . Personalmente me ayudo mucho ya que no compila todo el código cuándo estamos en Desarrollo y no utiliza más recursos de está forma. Si tienen una tostadora cómo en mi caso les servirá, aún es un herramienta relativamente nueva, pero se está formando una gran comunidad en cuánto los plugins/configuraciones que se pueden agregar.
Espero les sirva :p

1
4784Puntos
2 meses

Vite.js es genial!

Tambien he usado y me encanta Snowpack. Creo firmemente que los bundlers basados en ESM serán el futuro

2
3455Puntos

Ya se lo que voy a hacer despues del js challenge😎👍

pd: sus clases me encantan profe🤙

1
4784Puntos
2 meses

Muchas graciiaaaaaas! @san_kiago! 😄

2
7780Puntos

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.

4
12752Puntos
2 meses

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 😃

1
7780Puntos
2 meses

Super, te lo agradezco @jeaespejogo 😃

1
16070Puntos

Le echaré un vistazo, gracias.

1
4784Puntos
2 meses

Adelante Bryan, nos cuentas como te fue!

1
30070Puntos

Cuando termine la escuela de JavaScript, Next.Js voy por ti 😄 Gracias por este post.

1
384Puntos

Un nuevo tema que aprender, me encanta mucho el tema

1
14456Puntos

Yo tenía la duda con CRA, pero este post me dio la respuesta. Gracias.