React Suspense: Estrategias de obtención de datos para aplicaciones modernas

React Suspense es una potente característica introducida en React 16.6 que simplifica el manejo de operaciones asíncronas, especialmente la obtención de datos. Te permite "suspender" el renderizado de un componente mientras esperas que se carguen los datos, proporcionando una forma más declarativa y amigable para el usuario de gestionar los estados de carga. Esta guía explora varias estrategias de obtención de datos usando React Suspense y ofrece ideas prácticas para construir aplicaciones responsivas y de alto rendimiento.

Entendiendo React Suspense

Antes de sumergirnos en estrategias específicas, entendamos los conceptos centrales de React Suspense:

• Límite de Suspense (Suspense Boundary): Un componente <Suspense> actúa como un límite, envolviendo componentes que podrían suspenderse. Especifica una prop fallback, que renderiza una UI de marcador de posición (por ejemplo, un spinner de carga) mientras los componentes envueltos esperan los datos.
• Integración de Suspense con la obtención de datos: Suspense funciona a la perfección con bibliotecas que soportan el protocolo de Suspense. Estas bibliotecas típicamente lanzan una promesa cuando los datos aún no están disponibles. React captura esta promesa y suspende el renderizado hasta que la promesa se resuelva.
• Enfoque declarativo: Suspense te permite describir la UI deseada basándose en la disponibilidad de los datos en lugar de gestionar manualmente indicadores de carga y renderizado condicional.

Estrategias de obtención de datos con Suspense

Aquí hay varias estrategias efectivas de obtención de datos usando React Suspense:

1. Obtención de datos a nivel de componente

Este es el enfoque más directo, donde cada componente obtiene sus propios datos dentro de un límite de Suspense. Es adecuado para componentes simples con requisitos de datos independientes.

Ejemplo:

Digamos que tenemos un componente UserProfile que necesita obtener datos de usuario de una API:

            // Una utilidad simple para obtener datos (reemplaza con tu biblioteca preferida)
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`¡Error HTTP! Estado: ${res.status}`);
      }
      return res.json();
    })
    .then(
      res => {
        status = 'success';
        result = res;
      },
      err => {
        status = 'error';
        result = err;
      }
    );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    }
  };
};

const userResource = fetchData('/api/user/123');

function UserProfile() {
  const user = userResource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

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

            

              
                Copy
              
            
          

Explicación:

• La función fetchData simula una llamada a una API asíncrona. Crucialmente, *lanza una promesa* mientras los datos se están cargando. Esto es clave para que Suspense funcione.
• El componente UserProfile usa userResource.read(), que devuelve los datos del usuario inmediatamente o lanza la promesa pendiente.
• El componente <Suspense> envuelve al UserProfile y muestra la UI de fallback mientras la promesa se está resolviendo.

Beneficios:

• Simple y fácil de implementar.
• Bueno para componentes con dependencias de datos independientes.

Inconvenientes:

• Puede llevar a una obtención de datos en "cascada" si los componentes dependen de los datos de otros.
• No es ideal para dependencias de datos complejas.

2. Obtención de datos en paralelo

Para evitar la obtención de datos en cascada, puedes iniciar múltiples solicitudes de datos de forma concurrente y usar Promise.all o técnicas similares para esperar a que todas terminen antes de renderizar los componentes. Esto minimiza el tiempo de carga general.

Ejemplo:

            const userResource = fetchData('/api/user/123');
const postsResource = fetchData('/api/user/123/posts');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Publicaciones:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

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

            

              
                Copy
              
            
          

Explicación:

• Tanto userResource como postsResource se crean inmediatamente, lo que desencadena la obtención de datos en paralelo.
• El componente UserProfile lee ambos recursos. Suspense esperará a que *ambos* se resuelvan antes de renderizar.

Beneficios:

• Reduce el tiempo de carga general al obtener datos de forma concurrente.
• Rendimiento mejorado en comparación con la obtención en cascada.

Inconvenientes:

• Puede llevar a una obtención de datos innecesaria si algunos componentes no necesitan todos los datos.
• El manejo de errores se vuelve más complejo (manejar fallos de solicitudes individuales).

3. Hidratación selectiva (para Renderizado del Lado del Servidor - SSR)

Cuando se utiliza el Renderizado del Lado del Servidor (SSR), Suspense se puede usar para hidratar selectivamente partes de la página. Esto significa que puedes priorizar la hidratación de las partes más importantes de la página primero, mejorando el Tiempo hasta la Interactividad (TTI) y el rendimiento percibido. Esto es útil en escenarios donde deseas mostrar el diseño básico o el contenido principal lo más rápido posible, mientras difieres la hidratación de componentes menos críticos.

Ejemplo (Conceptual):

            // Lado del servidor:
<Suspense fallback={<div>Cargando contenido crítico...</div>}>
  <CriticalContent />
</Suspense>
<Suspense fallback={<div>Cargando contenido opcional...</div>}>
  <OptionalContent />
</Suspense>

            

              
                Copy
              
            
          

Explicación:

• El componente CriticalContent está envuelto en un límite de Suspense. El servidor renderizará este contenido por completo.
• El componente OptionalContent también está envuelto en un límite de Suspense. El servidor *podría* renderizar esto, pero React puede optar por transmitirlo más tarde.
• En el lado del cliente, React hidratará primero el CriticalContent, haciendo que la página principal sea interactiva antes. El OptionalContent se hidratará más tarde.

Beneficios:

• TTI y rendimiento percibido mejorados para aplicaciones SSR.
• Prioriza la hidratación del contenido crítico.

Inconvenientes:

• Requiere una planificación cuidadosa de la priorización del contenido.
• Añade complejidad a la configuración de SSR.

4. Bibliotecas de obtención de datos con soporte para Suspense

Varias bibliotecas populares de obtención de datos tienen soporte integrado para React Suspense. Estas bibliotecas a menudo proporcionan una forma más conveniente y eficiente de obtener datos e integrarse con Suspense. Algunos ejemplos notables incluyen:

• Relay: Un framework de obtención de datos para construir aplicaciones de React basadas en datos. Está diseñado específicamente para GraphQL y proporciona una excelente integración con Suspense.
• SWR (Stale-While-Revalidate): Una biblioteca de Hooks de React para la obtención de datos remotos. SWR proporciona soporte integrado para Suspense y ofrece características como la revalidación automática y el almacenamiento en caché.
• React Query: Otra popular biblioteca de Hooks de React para la obtención de datos, el almacenamiento en caché y la gestión de estados. React Query también es compatible con Suspense y ofrece características como la recuperación de datos en segundo plano y los reintentos de errores.

Ejemplo (usando SWR):

            import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function UserProfile() {
  const { data: user, error } = useSWR('/api/user/123', fetcher, { suspense: true })

  if (error) return <div>falló la carga</div>
  if (!user) return <div>cargando...</div> // Es probable que esto nunca se renderice con Suspense

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  )
}

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

            

              
                Copy
              
            
          

Explicación:

• El hook useSWR obtiene datos del endpoint de la API. La opción suspense: true habilita la integración con Suspense.
• SWR maneja automáticamente el almacenamiento en caché, la revalidación y el manejo de errores.
• El componente UserProfile accede directamente a los datos obtenidos. Si los datos aún no están disponibles, SWR lanzará una promesa, activando el fallback de Suspense.

Beneficios:

• Obtención de datos y gestión de estado simplificadas.
• Almacenamiento en caché, revalidación y manejo de errores integrados.
• Mejora del rendimiento y la experiencia del desarrollador.

Inconvenientes:

• Requiere aprender una nueva biblioteca de obtención de datos.
• Puede añadir algo de sobrecarga en comparación con la obtención de datos manual.

Manejo de errores con Suspense

El manejo de errores es crucial cuando se usa Suspense. React proporciona un componente ErrorBoundary para capturar los errores que ocurren dentro de los límites de Suspense.

Ejemplo:

            class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Actualiza el estado para que el próximo renderizado muestre la UI de fallback.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // También puedes registrar el error en un servicio de informes de errores
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Puedes renderizar cualquier UI de fallback personalizada
      return <h1>Algo salió mal.</h1>;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Cargando...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

            

              
                Copy
              
            
          

Explicación:

• El componente ErrorBoundary captura cualquier error lanzado por sus componentes hijos (incluidos los que están dentro del límite de Suspense).
• Muestra una UI de fallback cuando ocurre un error.
• El método componentDidCatch te permite registrar el error para fines de depuración.

Mejores prácticas para usar React Suspense

• Elige la estrategia de obtención de datos correcta: Selecciona la estrategia que mejor se adapte a las necesidades y complejidad de tu aplicación. Considera las dependencias de los componentes, los requisitos de datos y los objetivos de rendimiento.
• Usa los límites de Suspense estratégicamente: Coloca los límites de Suspense alrededor de los componentes que podrían suspenderse. Evita envolver aplicaciones enteras en un solo límite de Suspense, ya que esto puede llevar a una mala experiencia de usuario.
• Proporciona UIs de fallback significativas: Diseña UIs de fallback informativas y visualmente atractivas para mantener a los usuarios interesados mientras se cargan los datos.
• Implementa un manejo de errores robusto: Usa componentes ErrorBoundary para capturar y manejar errores con elegancia. Proporciona mensajes de error informativos a los usuarios.
• Optimiza la obtención de datos: Minimiza la cantidad de datos obtenidos y optimiza las llamadas a la API para mejorar el rendimiento. Considera el uso de técnicas de almacenamiento en caché y deduplicación de datos.
• Monitorea el rendimiento: Realiza un seguimiento de los tiempos de carga e identifica los cuellos de botella de rendimiento. Usa herramientas de perfiles para optimizar tus estrategias de obtención de datos.

Ejemplos del mundo real

React Suspense se puede aplicar en varios escenarios, incluyendo:

• Sitios web de comercio electrónico: Mostrando detalles de productos, perfiles de usuario e información de pedidos.
• Plataformas de redes sociales: Renderizando feeds de usuarios, comentarios y notificaciones.
• Aplicaciones de panel de control: Cargando gráficos, tablas e informes.
• Sistemas de gestión de contenidos (CMS): Mostrando artículos, páginas y activos multimedia.

Ejemplo 1: Plataforma de comercio electrónico internacional

Imagina una plataforma de comercio electrónico que atiende a clientes en varios países. Los detalles del producto, como precios y descripciones, pueden necesitar obtenerse según la ubicación del usuario. Suspense se puede usar para mostrar un indicador de carga mientras se obtiene la información del producto localizada.

            function ProductDetails({ productId, locale }) {
  const productResource = fetchData(`/api/products/${productId}?locale=${locale}`);
  const product = productResource.read();

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Precio: {product.price}</p>
      <p>Descripción: {product.description}</p>
    </div>
  );
}

function App() {
  const userLocale = getUserLocale(); // Función para determinar la localización del usuario
  return (
    <Suspense fallback={<div>Cargando detalles del producto...</div>}>
      <ProductDetails productId="123" locale={userLocale} />
    </Suspense>
  );
}

            

              
                Copy
              
            
          

Ejemplo 2: Feed de red social global

Considera una plataforma de redes sociales que muestra un feed de publicaciones de usuarios de todo el mundo. Cada publicación puede incluir texto, imágenes y videos, que pueden tardar diferentes cantidades de tiempo en cargarse. Suspense se puede usar para mostrar marcadores de posición para publicaciones individuales mientras se carga su contenido, proporcionando una experiencia de desplazamiento más fluida.

            function Post({ postId }) {
  const postResource = fetchData(`/api/posts/${postId}`);
  const post = postResource.read();

  return (
    <div>
      <p>{post.text}</p>
      {post.image && <img src={post.image} alt="Imagen de la publicación" />}
      {post.video && <video src={post.video} controls />}
    </div>
  );
}

function App() {
  const postIds = getPostIds(); // Función para obtener una lista de IDs de publicaciones
  return (
    <div>
      {postIds.map(postId => (
        <Suspense key={postId} fallback={<div>Cargando publicación...</div>}>
          <Post postId={postId} />
        </Suspense>
      ))}
    </div>
  );
}

            

              
                Copy
              
            
          

Conclusión

React Suspense es una herramienta poderosa para gestionar la obtención de datos asíncronos en aplicaciones de React. Al comprender las diversas estrategias de obtención de datos y las mejores prácticas, puedes construir aplicaciones responsivas, fáciles de usar y de alto rendimiento que ofrecen una gran experiencia de usuario. Experimenta con diferentes estrategias y bibliotecas para encontrar el mejor enfoque para tus necesidades específicas.

A medida que React continúa evolucionando, es probable que Suspense desempeñe un papel aún más significativo en la obtención de datos y el renderizado. Mantenerse informado sobre los últimos desarrollos y mejores prácticas te ayudará a aprovechar todo el potencial de esta característica.