M

MLOG

Español

¡Desbloquea la obtención de datos eficiente en React con Suspense! Explora diversas estrategias, desde la carga a nivel de componente hasta la obtención de datos en paralelo, y construye aplicaciones responsivas y fáciles de usar.

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:

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>
  );
}

Explicación:

Beneficios:

Inconvenientes:

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>
  );
}

Explicación:

Beneficios:

Inconvenientes:

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>

Explicación:

Beneficios:

Inconvenientes:

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:

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>
  );
}

Explicación:

Beneficios:

Inconvenientes:

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>
  );
}

Explicación:

Mejores prácticas para usar React Suspense

Ejemplos del mundo real

React Suspense se puede aplicar en varios escenarios, incluyendo:

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>
  );
}

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>
  );
}

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.