React es una de las librerías de JavaScript más populares de la actualidad. Con una década de rodaje ha pasado por diversas versiones y cuenta con una gran comunidad de desarrolladores. El mundo laboral está en permanente búsqueda de talentos, razón por la cual es muy importante estar a la altura y conocer todos los detalles de esta librería.
Antes de avanzar hay que tener claro algo que siempre menciono en mis clases, React es una biblioteca de JavaScript que nos facilita la creación de interfaces de usuario interactivas, con características dinámicas y «reactivas».
Un aspecto muy interesante de React que siempre destaco en mis clases es la posibilidad de «renderizar» las páginas desde el lado cliente o desde el lado servidor. ¿Qué significa esto? ¿Qué ventajas y desventajas ofrece cada una de estas alternativas? Lo analizamos a continuación.
Client side rendering
La renderización del lado del cliente implica que React correrá el código JavaScript en el navegador y se generará un contenido dinámico después de la carga de los scripts del lado cliente. Quizás esta sea la forma menos compleja de comenzar con React. Es el camino inicial que suelo recomendar en mis clases para quienes están arrancando con este biblioteca. Es una interesante manera de crear Apps que requieren mucha interactividad, ya que el usuario tendrá los scripts cargados de la aplicación en el navegador.
No requiere configuración avanzada de servidor y no es complejo correrlo en nuestro equipo para realizar las primeras pruebas. Si contamos con Node.js instalado es simple crear y probar un proyecto en nuestra computadora (o en servicios cloud que ya cuentan con una configuración muy simple).
Claro está que este camino puede tener desventajas. Comparada con la opción de renderizado del lado servidor puede ser algo más lenta y menos amigable para algunos motores de búsqueda.
Si desean aprender a crear un proyecto con React, comparto mi tutorial: Cómo crear un proyecto con React.
Server side rendering
Cuando hablamos de server side rendering, React se procesa del lado servidor y permite generar el contenido dinámico como HTML estático. Esto se envía al navegador, que no requiere cargar y procesar los scripts de React para comenzar a mostrar el contenido. Este mecánica ofrece ventajas en el rendimiento (especialmente en dispositivos modestos) y una mejor indexación por parte de los buscadores.
Es ideal para sitios Web que muestren varias páginas de contenidos. También existen muchos proyectos de e-commerce que se basan en esta tecnología, que ofrece versatilidad y escalabilidad.
Vale decir que de esta manera queda más carga de procesamiento del lado servidor, con lo cual es importante una configuración más avanzada para optimizarlo y escalar (si el proyecto lo requiere). También es importante saber que se necesita un tipo de servicio que soporte este mecanismo.
Next.js es uno de los mejores frameworks de la actualidad para trabajar con React.js del lado servidor. Para saber como comenzar, pueden leer mi guía en español: Next.js, un framework basado en React para el lado servidor.
En conclusión
Como podemos ver, no hay un claro ganador en este análisis, y hasta podríamos seguir sumando variantes dentro de las opciones que hemos planteado, ya que React también puede ser útil para creación de Apps nativas con React Native.
En este sentido siempre recomiendo en mis asesoramientos poder evaluar todas las necesidades del proyecto y también contemplar las posibilidades de expansión del mismo. De esta manera, con un panorama amplio, podremos ser más eficientes en el momento de tomar un camino en el desarrollo.
Para completar es importante destacar que también sería posible emplear ambas formas de renderizar una aplicación de React. Esto implicaría renderizar el contenido inicial en el lado servidor y luego «rehidratarlo» en el navegador del usuario para que sea interactivo. Esta alternativa suele denominarse con el nombre «renderización híbrida». Es una alternativa para desarrolladores más avanzados, pero bien implementada podría ofrecer las ventajas de ambos enfoques comentados en este artículo.
Para saber más sobre lo nuevo de React, recomiendo leer mi artículo: Las novedades de React 18.
Más información sobre React en la nueva documentación en línea: https://react.dev/.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta