Notas del curso Desarrollo de aplicaciones web con React 18

A lo largo de todo el curso hemos desarrollado aplicaciones con interfaz web basada en React y con todo tipo de funcionalidades. Ha llegado el momento de preparar una aplicación para desplegarla y hacerla pública.

En este módulo, exploraremos vías para optimizar la aplicación de cara a su uso en producción, herramientas para realizar un despliegue automático y frameworks para construir tanto aplicaciones más complejas como aplicaciones móviles utilizando React.

Hablaremos de:

• Renderizado en el lado servidor (SSR)
• Generación estática de sitios web
• Next.js
• Frameworks más conocidos para React
• Cómo desplegar aplicaciones React en Vercel
• Cómo crear aplicaciones móviles con React Native y Expo

Un posible inconveniente de las aplicaciones que tienen el frontend desarrollado en React, especialmente cuando se vuelven relativamente complejas, es que todo el renderizado se realiza en el navegador.

En muchos casos, esto conlleva trabajo redundante, ya que se renderizan las mismas páginas en todos los clientes. Piensa, por ejemplo, en el portal de inicio de una aplicación, o en la página de registro de una nueva cuenta: ¿realmente es necesario que el navegador compute el árbol de elementos que hacen falta para mostrarlas cada vez que se visiten?

Lo más probable es que podamos utilizar el propio servidor para resolver parte del trabajo, con el objetivo de que la interfaz de las páginas se cargue mucho más rápidamente.

Vamos a ver las diversas opciones que tenemos en React para conseguirlo.

La tecnología que permite compartir la tarea de renderizado entre el cliente y el servidor se denomina Server-Side Rendering (SSR), y consiste precisamente en preparar la interfaz inicial de una página React en el lado del servidor, de manera que el cliente pueda mostrarla directamente incluso antes de ejecutar cualquier código JavaScript.

La diferencia entre renderizar todas las páginas en el servidor a demanda y utilizar SSR con React es que, con SSR, el servidor solamente tiene que calcular el marcado HTML de la página web en su estado inicial. Una vez que la página llega al navegador se activa la reactividad de forma que se pueda cargar la información dinámica y todas las interacciones tengan efectos sin necesidad de recargar la página de nuevo.

El renderizado en el lado del servidor ofrece la ventaja primordial de que el navegador, para poder mostrar la página, ya no debe esperar a descargar todo el código JavaScript asociado a la aplicación web, con lo que se muestra mucho más rápido y el rendimiento percibido por los usuarios es mucho mayor. Esto es especialmente útil en entornos móviles. Y también que hasta entornos que no soporten JavaScript podrán mostrar al menos esta interfaz inicial.

También existen algunos inconvenientes causados por SSR, principalmente, que la respuesta del servidor puede ser más lenta, ya que debe computar la estructura de la página web a partir de los componentes en lugar de enviar una respuesta HTML casi vacía. Esto implica que el servidor debe tener más recursos disponibles para poder atender a un mismo número de clientes.

Para implementar SSR en nuestra aplicación, React ofrece una serie de funciones en el módulo react-dom/server como renderToString o renderToReadableStream. Estas se pueden ejecutar en un servidor para analizar el árbol de componentes y convertirlo a una cadena (o stream) de marcado HTML.

Por su parte, en el código del cliente ya no se realizará el renderizado inicial del componente raíz, sino que se utilizará la función hydrateRoot de react-dom/client para asociar los elementos HTML ya renderizados con la estructura de componentes.

React es una biblioteca especialmente útil a la hora de crear aplicaciones web de una sola página, pero eso no significa que no podamos aprovecharla para construir cualquier otro tipo de sitio web por medio de componentes. Por ejemplo, es muy sencillo implementar un blog que tome las publicaciones de una base de datos y produzca páginas para cada una, por medio de una herramienta de routing como React Router.

En estos casos, es muy probable que las páginas que se muestren a cualquier cliente sean siempre las mismas y solo cambien cuando se modifiquen los datos. Esto haría posible realizar todo el proceso de compilación de páginas de forma estática, antes de que cualquier cliente la consulte.

El trabajo de renderizado en el servidor, en este caso, consiste en adelantar el cómputo que tendrían que hacer todos los navegadores si construyeran el árbol DOM del sitio web desde cero, generando un conjunto de archivos HTML ya preparados para ser enviados al navegador.

De esta forma, la generación estática facilita respuestas rápidas del servidor ya que las respuestas a todas las posibles peticiones ya se han generado previamente, así como un tiempo de carga prácticamente nulo por parte del cliente, que se limita a mostrar una página web sin comportamiento dinámico.

Sin embargo, esta técnica solo se puede aplicar a sitios cuyos datos no varíen continuamente, puesto que se deben volver a construir tras cada cambio en los datos, y cuyas respuestas no dependan de las solicitudes de los clientes.

Por lo general no será habitual que implementemos manualmente el renderizado en el lado del servidor ni la generación estática de los sitios, sino que contaremos con frameworks construidos alrededor de React que aporten estas funcionalidades. En las próximas lecciones aprenderás más acerca de estos frameworks.

React, por sí sola, es únicamente una biblioteca para aislar las diferentes partes de una interfaz y componerlas. Como has visto a lo largo del curso, existen muchas herramientas adicionales que nos permiten añadir la funcionalidad que falta en React para construir aplicaciones completas.

Además de estas herramientas, también existen completos frameworks que aglutinan muchas utilidades de este tipo, facilitando el desarrollo de forma que nos podamos centrar en implementar los componentes y tener automatizadas otras tareas como el enrutamiento de páginas, el renderizado en el lado del servidor, la gestión de consultas de datos y diversas optimizaciones para que las aplicaciones estén preparadas para su uso en producción.

A continuación tienes una descripción de los frameworks más populares para el desarrollo de aplicaciones basadas en React, de forma que puedas saber d esu existencias y decidir si te interesa en algún momento aprenderlos para utilizarlos en tus proyectos.

Next.js, creado por Vercel, es un framework centrado en simplificar el renderizado de componentes en el servidor, con funcionalidades para diferenciar componentes del cliente y componentes del servidor. Incorpora un sistema de rutas automático de forma que es suficiente con crear archivos en directorios para que las rutas correspondientes funcionen en el sitio web. Permite optimizar imágenes y fuentes, e incluso incorpora funcionalidad para streams, que permite que los navegadores modernos comiencen a utilizar el código que descargan sin necesidad de esperar a cargar los archivos completos.

npx create-next-app@latest .

Remix es de los mismos creadores que React Router, por lo que la forma de desarrollar aplicaciones es muy similar en cuanto al sistema de routing, aunque no es necesario definir el objeto router ya que se generan las rutas automáticamente al estructurar los ficheros en directorios. Remix está enfocado a optimizar los tiempos de carga, permitiendo utilizar rutas anidadas y técnicas de precarga. La carga y envío de datos se realiza de la misma forma que al utilizar React Router.

Expo es un framework centrado en llevar las aplicaciones construidas con React más allá de la web, utilizando los componentes de React Native (del que hablaremos más adelante) para generar aplicaciones que funcionen tanto en navegadores como en dispositivos móviles. Con Expo se pueden crear diferentes pantallas de forma parecida al uso de rutas en los frameworks anteriores y, una vez que la aplicación está lista, incluye herramientas para generar los paquetes de aplicación y enviarlos a las tiendas de aplicaciones de Android e iOS.

npx create-expo-app@latest .

La arquitectura de React para creación de interfaces se construye con herramientas web y toma inspiración de las tecnologías web, pero no solo es útil para implementar sitios web. Por medio de una abstracción sobre los elementos básicos de cualquier interfaz, podemos llevar React a otras plataformas como, por ejemplo, las plataformas móviles Android e iOS, por medio de React Native.

React Native es un conjunto de herramientas que permiten desarrollar aplicaciones móviles en JavaScript y traducen las interfaces a elementos nativos de cada plataforma. De esta forma, un botón creado en una interfaz de React Native tendrá aspecto de botón nativo tanto en Android como en iOS.

La lógica de los componentes que implementemos se escribirá con la misma API de React con la que hemos desarrollado interfaces web, simplemente cambiando los elementos HTML y las hojas CSS por los componentes esenciales y estilos de React Native.

Los principales componentes de los que disponemos en React Native son los bloques básicos de cualquier interfaz:

• View es un componente contenedor para otros elementos, similar a un div en HTML.
• Text es un componente que permite introducir nodos de texto.
• FlatList, SectionList son componentes que facilitan la tarea de mostrar listas de elementos en la pantalla.
• Button y TextInput son los componentes esenciales para construir formularios.
• Image es un componente que permite introducir imágenes en la interfaz.

Por ejemplo, a continuación tienes una implementación de un componente que representa una tarjeta de memorización, con un botón que permite mostrar u ocultar el texto del reverso:

const TarjetaMemo = ({ anverso, reverso }) => {
  const [open, setOpen] = useState(false)
  return (
    <View>
      <Text>{ anverso }</Text>
      <Button title="Revelar" onPress={() => setOpen(!open)}>
      { open && <Text>{ reverso }</Text> }
    </View>
  )
}

Dispones de la lista completa de componentes disponibles en la documentación oficial.

Todo el estilo de la interfaz que se mostrará en la pantalla se construye con una clase denominada StyleSheet, que permite especificar propiedades muy similares a las de CSS. Por lo general, en el mismo fichero en el que implementamos un componente, podemos crear un objeto styles mediante el método estático StyleSheet.create, proporcionando un objeto donde cada campo está asociado a un objeto de propiedades de estilo.

A continuación tienes un ejemplo de hoja de estilos creada con la clase StyleSheet:

const styles = StyleSheet.create({
  lista: {
    gap: 16,
    minWidth: "100%",
    padding: 16,
    paddingBottom: 80
  },
  tarjeta: {
    backgroundColor: "#f0f0f0",
    padding: 16,
    textAlign: "center",
    gap: 16,
    borderWidth: 1,
    borderColor: "silver",
    borderRadius: 8,
    marginBottom: 16,
  },
});

Estos estilos se pueden aplicar a cualquiera de los elementos de nuestra interfaz utilizando la propiedad style:

<View style={styles.contenedor}></View>

Una diferencia fundamental de la asignación de estilo a los componentes de React Native es que todas las vistas son por defecto estructuras organizadas con flexbox, en lugar de utilizar el posicionamiento tradicional de las páginas web. Ten en cuenta esto a la hora de organizar la disposición de tus elementos, siempre puedes usar las propiedades alignItems, justifyContent, flex, etc.

En este módulo has aprendido conceptos acerca del despliegue y el uso de frameworks para desarrollar aplicaciones React, tanto para la web como para dispositivos móviles. Para que practiques el uso de estas herramientas, te proponemos los siguientes ejercicios:

• Crea un proyecto de Next.JS para un blog personal estático (no es necesario implementar el envío de publicaciones), puedes utilizar cualquier método para leer los datos sobre las publicaciones.
• Despliega tu proyecto en Vercel
• Crea un proyecto de Expo e intenta construir una sencilla aplicación de gestión de tareas utilizando useState. Arranca la aplicación al menos en el entorno web para comprobar su funcionamiento.

• APIs de React para servidor
• Cómo hidratar HTML renderizado en el servidor
• Usar Vite para renderizado en el servidor