Publicamos una nueva traducción para los aspirantes a desarrolladores de React. Esperamos que este artículo le ayude a elegir la herramienta adecuada para su próximo proyecto.
Cuando se trata de crear nuevos proyectos en React, tenemos una opción obvia: NextJS o Create-React-App. Gatsby está en gran parte fuera de uso debido a la lentitud de las compilaciones al escalar. Además, NextJS se está convirtiendo en un generador de sitios estáticos cada vez más conveniente.
Foto de Artyom Sapegin en Unsplash
En este artículo, veremos las ventajas y desventajas de NextJS y Create-React-App, y discutiremos qué casos de uso son adecuados para cada uno.
Crear-Reaccionar-Aplicación
Create-React-App es un conjunto de herramientas que le permite crear nuevas aplicaciones React. La CRA almacena dependencias como webpack y babel dentro de los scripts de reacción. Create-React-App facilita el trabajo con transpiladores y agrupadores.
Esto significa que actualizar estas dependencias "ocultas" no es nada difícil. Debe esperar una nueva versión de los scripts de reacción y la actualización. No tenemos que perder el tiempo arreglando cambios rotos en la configuración del paquete web.
Beneficios de usar Create-React-App
Sin opinión
Se puede usar cualquier biblioteca, no hay reglas ni pautas. La elección de la biblioteca para el enrutamiento también queda a su discreción.
Create-React-Apps se renderiza en el lado del cliente
Dado que estamos renderizando Create-React-Apps en el lado del cliente, la implementación es fácil. Podemos alojar la aplicación en cualquier alojamiento de archivos, por ejemplo, en S3. ¡Es mucho más fácil trabajar con las aplicaciones de RSE!
Desventajas de Create-React-App
Difícil de personalizar
No hay una forma integrada de personalizar la aplicación. Si necesita modificar la configuración de su paquete web, su única opción es utilizar una herramienta de terceros como craco o eject . Sin embargo, después de ejecutar el comando de expulsión, perderá casi todos los beneficios de usar Create-React-App.
Elimina la complejidad de
Create-React-App que funciona muy bien hasta que tienes que hacer algo que no admite. ¡Sera dificil! Al ocultar las configuraciones de babel y webpack, Create-React-App facilita el inicio. Sin embargo, esto evita que los desarrolladores aprendan más sobre cómo funcionan estas herramientas vitales.
Afecta negativamente al SEO
Dado que estamos renderizando Create-React-Apps del lado del cliente, la herramienta es complicada de implementar SEO. Create-React-Apps no debe usarse con fines de comercio electrónico o marketing.
SiguienteJS
No es del todo correcto comparar NextJS y Create-React-App, porque NextJS es mucho más. Si bien CRA es una herramienta para crear aplicaciones de React, NextJS es un marco para construirlas. NextJS ofrece renderizado del lado del servidor, creación de sitios estáticos, funcionalidad sin servidor y más. Este es un conjunto completo de herramientas que nos brinda todo lo que necesitamos para crear aplicaciones web efectivas.
¿Quiere llevarlo aún más lejos con NextJS? Prueba HappyKit .
HappyKit proporciona a las aplicaciones NextJS tareas repetitivas (tareas CRON), análisis muy simples y marcas de funciones. ¡Puedes registrarte para la beta aquí !
Beneficios de usar NextJS
¡NextJS es increíblemente rápido!
Gracias a la representación del lado del servidor y la generación de sitios estáticos, las aplicaciones NextJS se ejecutan significativamente más rápido. A continuación, se encarga de las optimizaciones de rendimiento predeterminadas.
Easy Deployment
Vercel (la empresa detrás de NextJS) facilita la implementación de aplicaciones React de pila completa . Un par de clics del mouse y tendrá un proceso de implementación profesional. El proceso incluye implementaciones previas al despliegue y de producción.
NextJS proporciona enrutamiento
NextJS proporciona una forma rápida y sencilla de crear API en aplicaciones. Si su aplicación utiliza API de terceros, a menudo necesitará su propia API para solicitudes de proxy y almacenamiento de tokens. El enrutamiento de NextJS es perfecto para esto. NextJS,
fácil de personalizar,
le permite personalizar sus configuraciones de babel o webpack. ¡Agregar cargadores de paquetes web o complementos de babel es fácil!
Desventajas de usar NextJS
NextJS es un marco de trabajo obstinado.
Solo hay una forma de trabajar con rutas en NextJS y no se puede personalizar. NextJS está limitado a su ruta basada en archivos y las rutas dinámicas solo son posibles cuando se usa un servidor NodeJS.
¿Cuándo debería usar NextJS?
Al crear una página de destino,
NextJS es ideal para crear una página de destino y otras tareas de marketing.
Cuando el SEO importa
Al crear sitios de comercio electrónico, la optimización de motores de búsqueda es más importante que nunca. Gracias a la representación del lado del servidor, NextJS también se destaca en este sentido.
Al crear sitios web, la
renderización de la aplicación en el lado del servidor elimina la necesidad de que los clientes rendericen en sus dispositivos. Para los usuarios de dispositivos más lentos, esto puede resultar en tiempos de arranque más rápidos.
¿Cuándo debería utilizar Create-React-App?
Al crear una aplicación cerrada
Si su aplicación solo es accesible para usuarios autenticados, pierde la mayoría de los beneficios de la representación del lado del servidor. En este caso, las aplicaciones CSR funcionan bien, son más fáciles y económicas de alojar.
Al crear aplicaciones web, las aplicaciones
web generalmente se benefician menos de la representación del lado del servidor. Por lo general, los usuarios reutilizan estas aplicaciones y podemos aplicar el almacenamiento en caché para proporcionar una carga ultrarrápida sin el costo y la molestia de SSR.
Esperamos que este artículo le ayude a decidir si NextJS y Create-React-App son adecuados para su próximo proyecto. Ambas herramientas son geniales para crear aplicaciones React. No podrá elegir un ganador: para algunos casos es mejor usar NextJS, y para otros, Create-React-App.