Skip to main content

Facets Only Usage

Configuration​

getFacetsOnly Function​

The getFacetsOnly function retrieves the facets from the collection or search results. It allows you to load only the relevant facet data, optimizing performance by fetching non-critical data after the initial page load.

Return Object​

The function returns a Promise of an object of type Facet[]. Each facet represents a filtering option available in the collection or search results.

Usage Example​

export async function loader(args: LoaderFunctionArgs) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

  // Await the critical data required to render initial state of the page
  const criticalData = await loadCriticalData(args);

  const facets = {
    facets: criticalData.collection.getFacetsOnly
      ? criticalData.collection.getFacetsOnly()
      : criticalData.collection.facets,
  };
  const dashboardConfig = {
    dashboardConfig: args.context.fastSimon.getDashboardConfig({
      cacheStrategy: CacheLong(),
    }),
  };
  return defer({...criticalData, ...facets, ...dashboardConfig});
}

Explanation​

1. Non-Critical Data:​

loadDeferredData is used to fetch non-critical data that won't block the initial render.

2. Critical Data:​

loadCriticalData fetches the essential data that is needed for rendering the page.

3. Facets Fetching:​

The getFacetsOnly function is called if available, asynchronously fetching the collection's facet data. If not available, it falls back to using the default facets from the collection.

4. Dashboard Configuration:​

The getDashboardConfig function is used to retrieve any necessary configuration for the dashboard.

5. Defer Function:​

The defer utility is used to return the data in a non-blocking manner, ensuring faster page load times.