¿Next.js frente a React? Es una asociación, no una competencia

No hay escasez de bibliotecas y marcos de JavaScript para los desarrolladores web modernos. Una de las bibliotecas más ubicuas es React, que Facebook (ahora Meta) creó para ayudar a crear aplicaciones ricas en funciones. Las aplicaciones de React se ejecutan tradicionalmente en navegadores web, pero el marco Next.js extiende la funcionalidad de React al lado del servidor a través del entorno de tiempo de ejecución de JavaScript Node.js.

En este artículo, veremos Next.js y React para que pueda decidir si son adecuados para su próximo proyecto.

Next.js y React: JavaScript en el siguiente nivel

Una encuesta de SlashData de 2022 encontró que hay más de 17 millones de programadores de JavaScript en todo el mundo, liderando un paquete que incluye lenguajes populares como Python y Java. JavaScript se puede usar tanto en el lado del cliente como en el del servidor, y esta versatilidad significa que los desarrolladores pueden crear aplicaciones completas utilizando un lenguaje de programación.

La introducción de bibliotecas de JavaScript como React y marcos como Next.js mejoró aún más ese desarrollo. Estas bibliotecas y marcos proporcionan características que simplifican la integración de front-end y back-end. Además, los desarrolladores pueden ampliar las capacidades de JavaScript utilizando administradores de paquetes como npm (el administrador de paquetes de Node.js) para instalar bibliotecas y herramientas de JavaScript. Estos recursos proporcionan funciones sofisticadas que reducen la cantidad de código que tiene que escribir usted mismo.

La extensibilidad de JavaScript significa que un conocimiento completo de sus herramientas más comunes es clave para su éxito como desarrollador web.

¿Qué es Next.js?

Lanzado inicialmente en 2016 por Vercel, Next.js es un marco React de código abierto que proporciona los componentes básicos para crear aplicaciones web de alto rendimiento. Desde entonces, las principales empresas lo han adoptado, incluidas Twitch, TikTok y Uber, por nombrar algunas.

Next.js ofrece una de las mejores experiencias de desarrollador para crear aplicaciones rápidas y compatibles con SEO. A continuación se presentan algunas características de Next.js que lo convierten en un marco de producción excepcional:

• Capacidades de renderizado híbrido
• División automática de códigos
• Optimización de imagen
• Compatibilidad integrada con preprocesadores CSS y bibliotecas CSS-in-JS
• Enrutamiento incorporado

Esas funciones ayudan a los desarrolladores de Next.js a ahorrar un tiempo considerable en la configuración y las herramientas. Puede saltar directamente a la creación de su aplicación, que podría admitir proyectos como los siguientes:

• Tiendas de comercio electrónico
• blogs
• Tableros
• Aplicaciones de una sola página
• Interactuar interfaces de usuario
• Sitios web estáticos

¿Qué es reaccionar?

React es una biblioteca de JavaScript utilizada para crear interfaces de usuario dinámicas. Además de crear interfaces web, puede crear aplicaciones móviles con React Native.

Algunos beneficios de usar React incluyen:

• Rendimiento mejorado: en lugar de actualizar cada componente en el DOM, React usa un DOM virtual para actualizar solo los componentes modificados.
• Muy basado en componentes: una vez que crea un componente, puede reutilizarlo repetidamente.
• Fácil depuración: las aplicaciones React utilizan un flujo de datos unidireccional, solo desde los componentes principales a los secundarios.

Siguiente.js frente a reaccionar

Aunque los desarrolladores a menudo usan Next.js y React para el mismo propósito, existen algunas diferencias fundamentales entre los dos.

Facilidad de uso

Es fácil comenzar con Next.js y React. Cada uno requiere ejecutar comandos individuales en su terminal usando npx , que es parte de npm para Node.js.

Para Next.js, el comando más simple es:

 npx create-next-app

Sin argumentos adicionales para create-next-app , la instalación continuará en modo interactivo. Se le pedirá un nombre de proyecto (que se usará para el directorio del proyecto) y si desea incluir soporte para TypeScript y el código linter ESLint.

Se verá algo como esto:

Al inicializar una instancia de React, el comando más simple incluye un nombre para el directorio del proyecto:

 npx create-react-app new-app

Esto genera una carpeta que contiene todas las configuraciones y dependencias iniciales necesarias:

Si bien ambos facilitan el comienzo, recuerde que Next.js se basa en React. Por lo tanto, no puede aprender Next.js sin primero aprender React y comprender cómo funciona. Afortunadamente, React cuenta con una curva de aprendizaje suave y es ideal para principiantes.

También es importante tener en cuenta que React está relativamente desestructurado. Debe instalar y configurar un enrutador React y decidir cómo manejar la obtención de datos, la optimización de imágenes y la división de códigos. Esta configuración requiere que instale y configure bibliotecas y herramientas adicionales.

Por el contrario, Next.js viene con estas herramientas preinstaladas y preconfiguradas. Con Next.js, cualquier archivo agregado a la carpeta de pages sirve automáticamente como una ruta. Debido a esta compatibilidad integrada, es más fácil trabajar con Next.js a diario, lo que le permite comenzar a codificar la lógica de su aplicación de inmediato.

Características de Next.js y React

Debido a que Next.js se basa en React, los dos comparten algunas características. Sin embargo, Next.js va un paso más allá e incluye características adicionales como enrutamiento, división de código, procesamiento previo y compatibilidad con API desde el primer momento. Estas son características que necesitaría configurar usted mismo cuando use React.

Obtención de datos

React procesa los datos en el lado del cliente. El servidor envía archivos estáticos al navegador y luego el navegador obtiene los datos de las API para completar la aplicación. Este proceso reduce el rendimiento de la aplicación y proporciona una experiencia de usuario deficiente, ya que la aplicación se carga lentamente. Next.js resuelve este problema a través de la representación previa.

Con la representación previa, el servidor realiza las llamadas API necesarias y obtiene los datos antes de enviar la aplicación al navegador. Como tal, el navegador recibe páginas web listas para renderizar.

La representación previa puede referirse a la generación de sitios estáticos (SSG) o la representación del lado del servidor (SSR). En SSG, las páginas HTML se generan en el momento de la compilación y se reutilizan para múltiples solicitudes. Next.js puede generar páginas HTML con o sin datos.

A continuación se muestra un ejemplo de cómo Next.js genera páginas sin datos:

 function App() { return <div>Welcome</div> } export default App

Para páginas estáticas que consumen datos externos, use la función getStaticProps() . Una vez que exporte getStaticProps() desde una página, Next.js renderizará previamente la página usando los accesorios que devuelve. Esta función siempre se ejecuta en el servidor, así que use getStaticProps() cuando los datos que usa la página estén disponibles en el momento de la compilación. Por ejemplo, puede usarlo para obtener publicaciones de blog de un CMS.

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

En situaciones en las que las rutas de la página dependan de datos externos, utilice la función getStaticPaths() . Entonces, para crear una ruta basada en la ID de la publicación, exporte getStaticPaths() desde la página.

Por ejemplo, puede exportar getStaticPaths() desde pages/posts/[id].js como se muestra a continuación.

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths() a menudo se combina con getStaticProps() . En este ejemplo, usaría getStaticProps() para obtener los detalles de la ID en la ruta.

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

En SSR, los datos se obtienen en el momento solicitado y se envían al navegador. Para usar SSR, exporte la función de accesorios getServerSide() desde la página que desea representar. El servidor llama a esta función en cada solicitud, lo que hace que SSR sea útil para páginas que consumen datos dinámicos.

Por ejemplo, puede usarlo para obtener datos de una API de noticias.

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

Los datos se obtienen en cada solicitud y se pasan al componente de noticias a través de accesorios.

División de código

La división de código consiste en dividir el código en fragmentos que el navegador puede cargar a pedido. Reduce la cantidad de código enviado al navegador durante la carga inicial, ya que el servidor envía solo lo que el usuario necesita. Los paquetes como Webpack, Rollup y Browserify admiten la división de código en React.

Next.js admite la división de código desde el primer momento.

Con Next.js, cada página se divide en código y agregar páginas a la aplicación no aumenta el tamaño del paquete. Next.js también admite importaciones dinámicas, lo que le permite importar módulos de JavaScript y cargarlos dinámicamente durante el tiempo de ejecución. Las importaciones dinámicas contribuyen a velocidades de página más rápidas porque los paquetes se cargan de forma diferida.

Por ejemplo, en el componente Inicio a continuación, el servidor no incluirá el componente héroe en el paquete inicial.

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

En su lugar, el elemento alternativo del suspenso se renderizará antes de que se cargue el componente héroe.

Compatibilidad con API en Next.js frente a React

La función de enrutamiento de API de Next.js le permite escribir código de backend y frontend en la misma base de código. Cualquier página guardada en la carpeta /pages/api/ se asigna a la ruta /api/* y Next.js la trata como un punto final de API.

Por ejemplo, puede crear una ruta API pages/api/user.js que devuelva el nombre del usuario actual de esta manera:

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

Si visita la URL https://app-url/api/user , verá el objeto de nombre de usuario.

 { username: 'Jane' }

Las rutas API son útiles cuando desea enmascarar la URL de un servicio al que está accediendo o desea mantener en secreto las variables de entorno sin codificar una aplicación de back-end completa.

Actuación

Sin duda, Next.js es superior en su capacidad para crear aplicaciones de mejor rendimiento con un proceso simplificado. Las aplicaciones SSR y SSG Next.js funcionan mejor que las aplicaciones React de representación del lado del cliente (CSR). Al obtener datos en el servidor y enviar todo lo que el navegador necesita para procesar, Next.js elimina la necesidad de una solicitud de obtención de datos a las API. Esto significa tiempos de carga más rápidos.

Además, porque Next.js admite el enrutamiento del lado del cliente. El navegador no tiene que obtener datos del servidor cada vez que un usuario navega a otra ruta. Además, el componente de imagen Next.js permite la optimización automática de imágenes. Las imágenes se cargan solo cuando ingresan a la ventana gráfica. Siempre que sea posible, Next.js también sirve imágenes en formatos modernos como WebP.

Next.js también proporciona optimizaciones de fuentes, captación previa de ruta inteligente y optimizaciones de agrupación. Estas optimizaciones no están disponibles automáticamente en React.

Apoyo

Debido a que React existe desde hace más tiempo que Next.js, tiene una comunidad más extensa. Sin embargo, muchos desarrolladores de React están adoptando Next.js, por lo que la comunidad crece constantemente. Los desarrolladores encuentran más fácilmente soluciones existentes a los problemas que encuentran en lugar de tener que crear soluciones desde cero.

Next.js también presenta una excelente documentación con ejemplos completos que son fáciles de entender. A pesar de su popularidad, la documentación de React no es tan navegable.

Resumen

Elegir Next.js o React se reduce a los requisitos de una aplicación.

Next.js mejora las capacidades de React al proporcionar una estructura y herramientas que mejoran el rendimiento. Estas herramientas, como el enrutamiento, la división de código y la optimización de imágenes, están integradas en Next.js, lo que significa que los desarrolladores no tienen que configurar nada manualmente. Gracias a estas características, Next.js es fácil de usar y los desarrolladores pueden comenzar a codificar la lógica comercial de inmediato.

Debido a las diferentes opciones de representación, Next.js es adecuado para aplicaciones de representación del lado del servidor o aplicaciones que combinan la generación estática y la representación del lado del servidor de Node.js. Además, gracias a la función de optimización proporcionada por Next.js, es perfecto para sitios que necesitan ser rápidos, como las tiendas de comercio electrónico.

React es una biblioteca de JavaScript que puede ayudarlo a crear y escalar aplicaciones front-end robustas. Su sintaxis también es sencilla, especialmente para desarrolladores con experiencia en JavaScript. Además, tiene control sobre las herramientas que utiliza en su aplicación y cómo las configura.

¿Estás planeando tu propia aplicación para dominar el mundo? Profundice en el enfoque de Kinsta para el alojamiento de aplicaciones Node.js para servicios compatibles con React y Next.js.