Vue Storefront 2 useProductList composable performance with large catalogs without caching

Answer

To isolate the GraphQL request latency from the Nuxt SSR rendering overhead of useProductList, measure the two phases separately on the server:

1. GraphQL latency – wrap the composable call with performance.now() (or Date.now()) before and after the awaited async data resolves.
2. SSR render time – record the duration of Nuxt’s render:route hook (or nuxtHooks.render:before → nuxtHooks.render:after) for the same request.

Subtracting the GraphQL interval from the total request time gives the pure rendering cost.

Measurement steps (server‑side)

// inside a Nuxt server middleware or plugin
import { performance } from 'perf_hooks';

export default defineNuxtPlugin(({ nuxtApp }) => {
  nuxtApp.hook('render:route', async (context) => {
    const startRender = performance.now();
    // let the page render normally
    await nuxtApp.callHook('render:route', context);
    const endRender = performance.now();
    console.time('ssr-render');
    console.timeEnd('ssr-render', endRender - startRender);
  });

  // Example usage in a page or component
  const startGraphQL = performance.now();
  const { data, pending, error } = await useProductList();
  const endGraphQL = performance.now();
  console.time('graphql-request');
  console.timeEnd('graphql-request', endGraphQL - startGraphQL);
});

Cache scope for product‑list data under SSR

For a catalog that is shared across users and changes infrequently, a global (route‑agnostic) server‑side cache is appropriate. The cache should:

• Be scoped to the route or a common tag (e.g., product-list) so all SSR requests hit the same entry.
• Use a short maxAge (e.g., 60 seconds) to allow timely updates while avoiding per‑request duplication.
• Include tags derived from the product IDs or a version stamp so that updates can invalidate the entry precisely.

This approach prevents the per‑request cache from causing repeated GraphQL calls under high traffic while keeping hydration consistent.

Invalidation trigger

The @vue-storefront/nuxt module invalidates cached useAsyncData results via a tag‑based mechanism:

1. Call the composable’s .invalidate() method (or pass an invalidateOn array containing the relevant tags) when product data changes.
2. The module removes the cached entry; the next SSR render triggers a fresh GraphQL fetch, updating both the server cache and the Pinia store on hydration.
3. If you manage updates outside the composable, you can manually purge the tag via the module’s cache API: $cache.removeTag('product-list').

Missing diagnostic detail

If your product list includes user‑specific filters (e.g., price range, locale), the cache key must incorporate those values; otherwise, the global cache could serve stale or incorrect data. Confirm whether any such filters are applied before finalizing the cache scope.