Como desarrollador, hay muchas herramientas, lenguajes, frameworks y paquetes de código abierto que tienes que aprender para que tu trabajo se facilite y sea sencillo (aunque el trayecto no es sencillo, lo lograrás).

Algunas de estas herramientas, lenguajes, o frameworks son usados diariamente por miembros de la comunidad y pueden padecer cambios fundamentales en cómo son implementados o escritos con el tiempo.

En este artículo, exploraremos dos tecnologías populares de JavaScript, Next.js y React.js, comparando sus diferencias claves, examinando sus fortalezas, y ofreciendo perspectivas para ayudar a los desarrolladores a elegir la mejor opción para sus proyectos.

Tabla de Contenido

Entendiendo React

Frecuentemente nos confundimos en cuanto si React es un framework de JavaScript o no, pero acá está la respuesta a esa pregunta. React no es un framework de JavaScript, sino una librería. Ahora, estas dos terminologías son intercambiables con frecuencia o mal usadas, pero los explicaré en breve.

Una librería es una colección de código ya escrito que puede ser re-usado o llamarse cuando construyes tu proyecto.

Ejemplo: Imagina una biblioteca en donde vas a estudiar. Los libros ya están disponibles en los estantes – simplemente agarras uno que necesitas y comienzas a leer. De forma similar, en programación, una librería (o biblioteca) provee herramientas ya terminadas que puedes usar en tu proyecto sin tener que empezar de cero.

Por otro lado, un framework es como una estructura ya hecha que te ayuda a construir tu proyecto. Te da una fundación sólida para trabajar, de forma que no tengas que comenzar desde cero o escribir código repetitivo. En cambio, te enfocas en agregar tus propias características y lógica, mientras que el framework se encarga de ejecutar cosas en el momento exacto y de la forma correcta.

Ejemplo: Imagina que un framework es como una casa en construcción donde los muros, el fundamento, y el techo ya están construidos. Todo lo que necesitas hacer es decidir cómo diseñar el interior – cómo elegir los muebles, la pintura y las decoraciones. El framework maneja el trabajo pesado, cómo asegurar que la casa se mantenga fuerte, mientras te enfocas en hacer lo tuyo. De forma similar, en programación, el framework provee la estructura, y tu agregas tu lógica personalizada para completar el proyecto.

Con eso fuera del camino, continuemos.

React es una de las librerías de JavaScript más populares usadas por los desarrolladores para construir interfaces de usuario rápidos, interactivos y confiables. Es una librería declarativa que ayuda a los desarrolladores crear aplicaciones web basado en componentes. Facebook desarrolló esta librería en 2011 y ha sido tendencia desde entonces.

Usualmente, cuando se escribe código JavaScript, creamos un archivo con la extensión js. Por ejemplo: App.js, script.js, y así sucesivamente. En React creamos un archivo con la extensión jsx. Eso es: index.jsx, Home.jsx, y así sucesivamente. El jsx es una extensión de React que te permite escribir un código de JavaScript que se parece a HTML. La sintaxis, cuando se ejecuta, pasa a través de pre-procesadores/transpiladores los cuales transforman el código parecido a HTML a código estándar de JavaScript.

En el corazón de todas las aplicaciones de React están los componentes. Los componentes son trozos de interfaces de usuario (UI) los cuales son hechos de forma independiente y pueden ser re-usados en partes distintas en tu proyecto. Distintos componentes pueden ser hechos de forma separada y luego se juntan para formar una interfaz de usuario compleja (UI).

Nota: Cada aplicación de React tiene al menos un componente, comúnmente referido como el componente raíz. Este componente representa la aplicación entera. Dentro del componente raíz, con frecuencia hay otros componentes, conocidos como componentes hijos, que ayudan a estructurar y manejar distintas partes de la aplicación.

Acá hay una representación estructural de los componentes raíz e hijos.

structural representation of root and child components

De la imagen de arriba, puedes entender con claridad de qué tratan los componentes. App es el componente raíz, y dentro del componente raíz tenemos los componentes hijos: Navbar, Profile, Blog y Footer. Los hijos componentes pueden ser re-usados en otras páginas del proyecto sin tener que re-escribir el código nuevamente.

Renderizado del lado del cliente

El renderizado del lado del cliente (CSR – Client Side Rendering en inglés) es una técnica común, especialmente en librerías como React y frameworks como Vue.js, Angular, y así sucesivamente. Aquí, el navegador descarga y procesa los archivos de JavaScript para renderizar dinámicamente el contenido directamente en el dispositivo del usuario. Con CSR, las páginas web se generan de forma dinámica, y cualquier actualización o cambio al código se aplica sin requerir una recarga completa de página. Solamente las partes específicas que han cambiado se actualizan, asegurando una experiencia de usuario fluida y eficiente.

Por lo tanto, en CSR, la lógica y la estructura de la página web se maneja por el cliente (navegador) y una recarga completa de página se muestra.

Para ayudarte a entender CSR, he agregado un artículo aquí.

Casos de uso para React en Desarrollo Web

Desde que React se volvió la opción preferida de muchos desarrolladores, su flexibilidad lo ha hecho conveniente para un amplio rango de casos de uso en desarrollo web. Aquí hay unos pocos casos:

  • Aplicaciones de una Sola Página (SPAs): Cuando hablamos sobre SPAs, no nos referimos realmente que tu aplicación web tiene solamente una página, puede tener múltiples páginas. En SPAs, tus archivos de aplicación web (HTML, CSS, JS) se generan una vez en tu página web y cuando las actualizaciones subsecuentes se realizan en el archivo, tu página no tendrá que recargar completamente. Este enfoque ayuda a asegurar una transición más rápida, reduce la carga en el servidor y mejorar la experiencia general de usuario.
  • Interfaces de Usuario Interactivos: React es idóneo para construir interfaces de usuarios interactivos, de vez en cuando, pasa por actualizaciones dinámicas basadas en las acciones de los usuarios. Ejemplos son formularios en línea, paneles de control, sitios web (sitios web de comercio electrónico), y así sucesivamente.
  • Aplicaciones Multiplataforma: Tener conocimientos de React viene a la mano cuando se construyen aplicaciones móviles, simplificando la conexión entre aplicaciones web y aplicaciones móviles. Herramientas como React Native te ayudan a lograr este proceso.

Explorando Next.js

Next.js es un framework popular basado en React usado para construir aplicaciones web con el uso de componentes de React. Next.js provee estructura adicional, características, y optimización para tu aplicación web.

A diferencia de React, Next.js soporta renderizado del lado del servidor (SSR), por lo que las solicitudes se procesan y se generan desde el servidor y luego mostrado en el navegador (cliente).

Renderizado del lado del Servidor

El Renderizado del lado del servidor (SSR - en inglés "Server Side-Rendering") es una técnica en el desarrollo web donde un servidor genera el HTML para una página web en el servidor y lo envía al navegador (cliente). En otras palabras, el servidor maneja las estructuras y la lógica de la página y muestra una página totalmente renderizada en la pantalla.

En el renderizado del lado del servidor, una solicitud se envía primero al servidor (cliente), luego el servidor comienza a procesar la solicitud y cuando termina de procesar la solicitud, ejecuta la solicitud al generar y muestra un archivo HTML con el contenido en el navegador (lado del cliente). Cuando un cambio se hace o una nueva página se solicita, una nueva solicitud se envía nuevamente al servidor y es procesado nuevamente – un nuevo archivo HTML y totalmente renderizado será generado y mostrado en el navegador (cliente).

Para una mejor comprensión de CSR y SSR, agregué un vídeo de YouTube aquí.

Casos de Uso para Next.js en el desarrollo web

  • Aplicaciones de una Sola Página (SPAs): Next.js puede ser usado en la creación de aplicaciones de una sola página, similar a React.
  • Optimizado para SEO: Next.js ayuda en crear sitios web optimizados para SEO al renderizar un archivo HTML en el servidor y entregarlo al navegador. Esto mejora la visibilidad en el motor de búsquedas, incrementando las chances que tu sitio web aparezca en la parte superior de los resultados de búsqueda.
  • Plataformas de Multi-Usuarios: Debido a la habilidad de Next.js de manejar el enrutamiento dinámico, el manejo de API, y así sucesivamente, es fácil de crear aplicaciones que sirven para diversos propósitos.

Diferencia clave entre Next.js y React

Métodos de renderizado: lado del cliente vs. lado del servidor

Cuando hablamos sobre el método de renderizado en React, React se base principalmente en el método de renderizado del lado del cliente (CSR). Por lo tanto tanto la lógica como la estructura de la página web será manejado por el navegador (cliente). Aunque este método se usa comúnmente, tiene algunos efectos secundarios como carga de página inicial más lenta.

Next.js por el otro lado, soporta tanto SSR como CSR ya que fue construido por encima de React. Las páginas web se renderizan en el servidor y tanto la lógica como la estructura de la página se manejan por el servidor. Esto permite una carga más rápida de la página web y también mejora el SEO.

Consideraciones de rendimiento

En términos de consideraciones de rendimiento, Next.js se prefiere frecuentemente porque ofrece múltiples opciones de renderizado, incluyendo renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG), Regeneración estático incremental (ISR), y renderizado del lado del cliente (CSR). En contraste, React primariamente provee un enfoque de renderizado único: renderizado del lado del cliente.

Implicaciones de SEO

React está menos optimizado para SEO porque los motores de búsqueda puede tener dificultades al indexar contenido que requiere ejecución de JavaScript para renderizar.

Del otro lado, Next.js está más optimizado para SEO que React porque renderiza contenido en el servidor, provee HTML totalmente renderizado para los motores de búsqueda para facilitar el indexado.

Escalabilidad y complejidad del Proyecto

En términos de escalabilidad y complejidad del proyecto, Next.js es generalmente mejor que React. Next.js provee funciones integradas que mejoran la escalabilidad de tu proyecto. Estos incluyen:

  • Renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG) para mejor rendimiento y SEO.
  • Una función de rutas API incorporada para crear funciones serverless sin problemas.
  • Un sistema de enrutamiento basado en archivos que simplifica la organización de proyectos más grandes.

En contraste, con React, eres responsable de configurar y mantener la estructura para la escalabilidad. Para proyectos más grandes, esto frecuentemente requiere agregar herramientas adicionales tales como:

  • Librerías de gestión de estado (por ejemplo, Redux, Recoil, y así sucesivamente)
  • Librerías de enrutamiento (por ejemplo, React Router)

Estas herramientas son necesarias para mejorar la escalabilidad de React y abarcar la complejidad del proyecto, pero también incrementan la carga y esfuerzo necesario para configurar y gestionar la aplicación.

En resumen, aquí una tabla que lo desglosa:

Factores React Next.js
Escalabilidad Es posible pero para incrementar la escalabilidad, requiere herramientas adicionales y una configuración personalizada. Es escalable y ya tiene herramientas integradas que incrementan la escalabilidad.
Rendimiento Provee solamente una opción de renderizado el cual es el renderizado del lado del cliente (CSR). Ofrece múltiples opciones de renderizado, incluyendo SSR, SSG, ISR, y CSR.
SEO No está optimizado para el SEO porque a los motores de búsquedas les podría costar indexar el contenido que requiere ejecución de JavaScript para renderizar. Está más optimizado para el SEO que React porque renderiza el contenido en el servidor, proveyendo HTML totalmente renderizado para los motores de búsqueda para indexar más fácilmente.
Caso de uso Mayormente usado en proyectos más pequeños o únicos. Mayormente usado en proyectos de gran escala y mejora el rendimiento el SEO.

Cuándo usar React o Next.js

Elegir la herramienta correcta para tu proyecto depende únicamente en la complejidad de la solución del proyecto que estás construyendo. Mientras que React y Next.js están relacionados cercanamente, cada uno tiene sus fortalezas y casos de uso óptimos.

Cuándo usar React

Aquí hay algunos casos donde es mejor usar React para tu proyecto:

  • Cuando construyes aplicaciones altamente interactivas.
  • Cuando tu proyecto requiere manejo manual de enrutamiento, gestión de estado o/e integración de API.
  • Cuando tu proyecto requiere renderizado del lado del cliente (CSR)

Cuándo usar Next.js

Aquí hay algunos casos donde es mejor usar Next.js:

  • Cuando tu proyecto requiere un mejor SEO.
  • Cuando tu proyecto requiere renderizado del lado del servidor.
  • Cuando tu proyecto requiere que construyas APIs junto con tu código de frontend.
  • Cuando construyes sitios web basado en contenido como blogs o sitios e-commerce. Debido a su uso de renderizado del lado del servidor, ayuda en mejorar los tiempos de carga de los contenidos en la página.
  • Next.js se usa mejor cuando quieres optimizar imágenes en tu proyecto.

Conclusión

A este punto creo que tienes una clara comprensión de React y de Next.js, los conceptos del renderizado del lado del servidor y del lado del cliente, los casos de uso tanto para React como para Next.js, y las diferencias claves entre ellos.

Gracias por tomarte el tiempo de leer este artículo. Espero que lo hayas encontrado útil.

Feliz codificación.