Coordinación de Suspense en React: Dominando la Obtención de Datos en Paralelo

React Suspense ha revolucionado la forma en que manejamos las operaciones asíncronas, particularmente la obtención de datos. Permite que los componentes "suspendan" la renderización mientras esperan que se carguen los datos, proporcionando una forma declarativa de gestionar los estados de carga. Sin embargo, simplemente envolver las obtenciones de datos individuales con Suspense puede llevar a un efecto de cascada, donde una obtención se completa antes de que comience la siguiente, lo que impacta negativamente en el rendimiento. Esta publicación de blog profundiza en estrategias avanzadas para coordinar múltiples obtenciones de datos en paralelo usando Suspense, optimizando la capacidad de respuesta de su aplicación y mejorando la experiencia del usuario para una audiencia global.

Comprendiendo el Problema de la Cascada en la Obtención de Datos

Imagine un escenario en el que necesita mostrar un perfil de usuario con su nombre, avatar y actividad reciente. Si obtiene cada dato secuencialmente, el usuario ve un indicador de carga para el nombre, luego otro para el avatar y, finalmente, uno para el feed de actividad. Este patrón de carga secuencial crea un efecto de cascada, retrasando la renderización del perfil completo y frustrando a los usuarios. Para los usuarios internacionales con diferentes velocidades de red, este retraso puede ser aún más pronunciado.

Considere este fragmento de código simplificado:

function UserProfile() {
  const name = useName(); // Obtiene el nombre del usuario
  const avatar = useAvatar(name); // Obtiene el avatar basado en el nombre
  const activity = useActivity(name); // Obtiene la actividad basada en el nombre

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="Avatar del usuario" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

En este ejemplo, useAvatar y useActivity dependen del resultado de useName. Esto crea una cascada clara: useAvatar y useActivity no pueden comenzar a obtener datos hasta que useName se complete. Esto es ineficiente y un cuello de botella común en el rendimiento.

Estrategias para la Obtención de Datos en Paralelo con Suspense

La clave para optimizar la obtención de datos con Suspense es iniciar todas las solicitudes de datos simultáneamente. Aquí hay varias estrategias que puede emplear:

1. Precarga de Datos con `React.preload` y Recursos

Una de las técnicas más poderosas es precargar datos antes de que el componente siquiera se renderice. Esto implica crear un "recurso" (un objeto que encapsula la promesa de obtención de datos) y precargar los datos. `React.preload` ayuda con esto. Para cuando el componente necesita los datos, ya están disponibles, eliminando casi por completo el estado de carga.

Considere un recurso para obtener un producto:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`¡Error HTTP! Estado: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// Uso:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

Ahora, puede precargar este recurso antes de que se renderice el componente ProductDetails. Por ejemplo, durante las transiciones de ruta o al pasar el ratón.

React.preload(productResource);

Esto asegura que los datos probablemente estén disponibles para cuando el componente ProductDetails los necesite, minimizando o eliminando el estado de carga.

2. Usando `Promise.all` para la Obtención de Datos Concurrente

Otro enfoque simple y efectivo es usar Promise.all para iniciar todas las obtenciones de datos simultáneamente dentro de un único límite de Suspense. Esto funciona bien cuando las dependencias de datos se conocen de antemano.

Revisemos el ejemplo del perfil de usuario. En lugar de obtener datos secuencialmente, podemos obtener el nombre, el avatar y el feed de actividad simultáneamente:

import { useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Publicó una foto' },
    { id: 2, text: 'Actualizó el perfil' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="Avatar del usuario" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>Cargando Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Cargando Actividad...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

Sin embargo, si cada uno de `Avatar` y `Activity` también dependen de `fetchName`, pero se renderizan dentro de límites de Suspense separados, puede elevar la promesa de `fetchName` al padre y proporcionarla a través del Contexto de React.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Publicó una foto' },
    { id: 2, text: 'Actualizó el perfil' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="Avatar del usuario" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>Cargando Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Cargando Actividad...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Usando un Hook Personalizado para Gestionar Obtenciones en Paralelo

Para escenarios más complejos con dependencias de datos potencialmente condicionales, puede crear un hook personalizado para administrar la obtención de datos en paralelo y devolver un recurso que Suspense puede usar.

import { useState, useEffect, useRef } from 'react';

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('El recurso aún no se ha inicializado');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// Ejemplo de uso:
async function fetchUserData(userId) {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'Usuario ' + userId };
}

async function fetchUserPosts(userId) {
  // Simular llamada a la API
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'Publicación 1' }, { id: 2, title: 'Publicación 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>Cargando datos del usuario...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Este enfoque encapsula la complejidad de administrar las promesas y los estados de carga dentro del hook, haciendo que el código del componente sea más limpio y se centre más en renderizar los datos.

4. Hidratación Selectiva con Renderizado del Servidor de Transmisión

Para aplicaciones renderizadas en el servidor, React 18 presenta la hidratación selectiva con el renderizado del servidor de transmisión. Esto le permite enviar HTML al cliente en fragmentos a medida que están disponibles en el servidor. Puede envolver componentes de carga lenta con límites <Suspense>, lo que permite que el resto de la página se vuelva interactivo mientras los componentes lentos aún se están cargando en el servidor. Esto mejora dramáticamente el rendimiento percibido, especialmente para los usuarios con conexiones de red o dispositivos lentos.

Considere un escenario en el que un sitio web de noticias necesita mostrar artículos de varias regiones del mundo (por ejemplo, Asia, Europa, América). Algunas fuentes de datos pueden ser más lentas que otras. La hidratación selectiva permite mostrar primero los artículos de las regiones más rápidas, mientras que los de las regiones más lentas aún se están cargando, evitando que se bloquee toda la página.

Manejo de Errores y Estados de Carga

Si bien Suspense simplifica la gestión del estado de carga, el manejo de errores sigue siendo crucial. Los límites de error (usando el método componentDidCatch del ciclo de vida o el hook useErrorBoundary de bibliotecas como `react-error-boundary`) le permiten manejar con elegancia los errores que ocurren durante la obtención o renderización de datos. Estos límites de error deben colocarse estratégicamente para detectar errores dentro de límites de Suspense específicos, evitando que toda la aplicación se bloquee.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... obtiene datos que podrían generar errores
}

function App() {
  return (
    <ErrorBoundary fallback={<div>¡Algo salió mal!</div>}>
      <Suspense fallback={<div>Cargando...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Recuerde proporcionar una interfaz de usuario de respaldo informativa y fácil de usar tanto para los estados de carga como de error. Esto es especialmente importante para los usuarios internacionales que pueden estar encontrando velocidades de red más lentas o cortes de servicio regionales.

Mejores Prácticas para Optimizar la Obtención de Datos con Suspense

• Identificar y Priorizar Datos Críticos: Determine qué datos son esenciales para la renderización inicial de su aplicación y priorice la obtención de esos datos primero.
• Precargar Datos Cuando Sea Posible: Use `React.preload` y recursos para precargar datos antes de que los componentes los necesiten, minimizando los estados de carga.
• Obtener Datos Concurrentemente: Utilice `Promise.all` o hooks personalizados para iniciar múltiples obtenciones de datos en paralelo.
• Optimizar los Puntos Finales de la API: Asegúrese de que sus puntos finales de la API estén optimizados para el rendimiento, minimizando la latencia y el tamaño de la carga útil. Considere usar técnicas como GraphQL para obtener solo los datos que necesita.
• Implementar Caché: Almacene en caché los datos a los que se accede con frecuencia para reducir la cantidad de solicitudes de la API. Considere usar bibliotecas como `swr` o `react-query` para obtener capacidades de almacenamiento en caché sólidas.
• Usar la División de Código: Divida su aplicación en fragmentos más pequeños para reducir el tiempo de carga inicial. Combine la división de código con Suspense para cargar y renderizar progresivamente diferentes partes de su aplicación.
• Supervisar el Rendimiento: Supervise regularmente el rendimiento de su aplicación utilizando herramientas como Lighthouse o WebPageTest para identificar y abordar los cuellos de botella en el rendimiento.
• Manejar los Errores con Elegancia: Implemente límites de error para detectar errores durante la obtención y renderización de datos, proporcionando mensajes de error informativos a los usuarios.
• Considerar el Renderizado del Lado del Servidor (SSR): Por razones de SEO y rendimiento, considere usar SSR con transmisión e hidratación selectiva para ofrecer una experiencia inicial más rápida.

Conclusión

React Suspense, cuando se combina con estrategias para la obtención de datos en paralelo, proporciona un poderoso conjunto de herramientas para construir aplicaciones web receptivas y de alto rendimiento. Al comprender el problema de la cascada e implementar técnicas como la precarga, la obtención concurrente con Promise.all y los hooks personalizados, puede mejorar significativamente la experiencia del usuario. Recuerde manejar los errores con elegancia y monitorear el rendimiento para asegurarse de que su aplicación permanezca optimizada para los usuarios de todo el mundo. A medida que React continúa evolucionando, explorar nuevas características como la hidratación selectiva con el renderizado del servidor de transmisión mejorará aún más su capacidad para ofrecer experiencias de usuario excepcionales, independientemente de la ubicación o las condiciones de la red. Al adoptar estas técnicas, puede crear aplicaciones que no solo sean funcionales, sino también un placer de usar para su audiencia global.

Esta publicación de blog tiene como objetivo proporcionar una descripción general completa de las estrategias de obtención de datos en paralelo con React Suspense. Esperamos que le haya resultado informativo y útil. Le animamos a experimentar con estas técnicas en sus propios proyectos y a compartir sus hallazgos con la comunidad.