#Precarga de datos

La función prefetch se usa para precargar recursos y datos de los módulos remotos, lo que mejora el rendimiento de la aplicación y la experiencia de usuario. Al cargar de antemano el contenido necesario antes de que el usuario acceda a una funcionalidad, los tiempos de espera pueden reducirse considerablemente.

#Cuándo usarla

prefetch es la opción ideal cuando quieres precargar el JavaScript, el CSS o los datos asociados a un componente sin renderizarlo de inmediato. Por ejemplo, puedes activar prefetch cuando el usuario pasa el cursor sobre un enlace o un botón, de modo que, cuando realmente haga clic, el componente se renderice más rápido.

#API

interface ModuleFederation {
  prefetch(options: {
    id: string;
    dataFetchParams?: Record<string, any>;
    preloadComponentResource?: boolean;
  }): void;
}

#Parámetros

type PrefetchOptions = {
  // Unique identifier for the remote module, in the format '<remoteName>/<exposedModule>', e.g. 'shop/Button'.
  id: string;

  // If the remote component has a data fetch function, this object will be passed to it.
  dataFetchParams?: Record<string, any>;

  // Whether to preload the component's resources, including JavaScript chunks and associated CSS files. Defaults to false.
  preloadComponentResource?: boolean;
};

#Ejemplos de uso

Supongamos que tenemos una aplicación remota shop que expone un componente Button, y que este componente tiene asociada una función de obtención de datos.

#Escenario 1: Hacer prefetch solo de los datos

Cuando un usuario pasa el cursor sobre un enlace que lleva a la página de la tienda, podemos hacer prefetch de los datos que necesita esa página.

import { getInstance } from '@module-federation/enhanced/runtime';

const instance = getInstance();

const handleMouseEnter = () => {
  instance.prefetch({
    id: 'shop/Button',
    dataFetchParams: { productId: '12345' },
  });
};

#Escenario 2: Hacer prefetch de los datos y precargar los recursos del componente

Para optimizar aún más, podemos descargar los archivos JS y CSS del componente al mismo tiempo que hacemos prefetch de los datos.

import { getInstance } from '@module-federation/enhanced/runtime';

const instance = getInstance();

const handleMouseEnter = () => {
  instance.prefetch({
    id: 'shop/Button',
    dataFetchParams: { productId: '12345' },
    preloadComponentResource: true,
  });
};

Usando prefetch con flexibilidad, puedes controlar con precisión el momento en que se cargan los recursos según los escenarios concretos de tu aplicación y el comportamiento de los usuarios, optimizando así el rendimiento de la aplicación.