Is it possible to fetch Component Variants before rendering the component?

Developer Support
1

Is it possible at all, with the NextJS Loader package, or any API, to fetch information about components (i.e. what variants are registered?)

I would like to conditionally render supporting content on my server, depending on whether or not a component variant exists (e.g. one per product, but not all products).

In this case, I need to know if a variant exists before rendering the component. This would also actually make for much cleaner code elsewhere, as it means not rendering an empty “Base” component variant on the frontend.

2

There’s no API available for fetching variants, but there may be some workarounds.

One is to have a component per product, instead of a variant per product.

You could have a component naming convention, like ProductExtra/sku-123, then check on the server if it exists before rendering:

const data = await PLASMIC.maybeFetchComponentData(`ProductExtra/${sku}`);
if (data) {
  // render supporting content + <PlasmicComponent component={`ProductExtra/${sku}`} />
}

maybeFetchComponentData returns null when the component doesn’t exist, so a missing product doesn’t render an empty “Base”.

Another option could be manually setting component metadata with a list of variants, and checking it on the server but that requires manually keeping it up to date with the actual set of variants.

2 Likes
3

Sorry for the late response, I’ve just got the oppurtunity to try this and this is exactly what I needed; I was concerned that this would be cluttered, but the fact that this collapses the “children” (e.g. ProductExtra > sku-123) is perfect.

Thanks again!