Volto: Recommended pattern for data fetching whilst server-side?

I'm wondering if there's a recommended pattern for how to do data additional data fetching during SSR? For example, if I'm creating a listing variation and need to fetch some additional information about an item that isn't provided by content.items, how can I ensure the SSR waits for me to make additional REST API calls? Currently I'm pushing alot of this work client-side:

const [itemWithData, setItemWithData] = useState(null);
  useEffect(() => {
    const api = new Api();
    api.get(item['@id']).then((itemData) => {
      setItemWithData(itemData);
    });
  }, [item]);

If there is a common pattern, it would be nice if it were mentioned in the Volto documentation too! :slight_smile: Coming from Next.JS where there's clear boundaries of when non-client data fetching happens and extensive documentation around this, I find it a gap in the documentation right now.

Don't know if it makes a difference, but I'm almost exclusively using functional components + hooks.

For optimal results the first SSR request (the listing request) would already have the extra information. It's worth investigating that route.

There's a somewhat similar mechanism to Next.JS', see
Server-side rendering for async blocks – Frontend – Blocks — Plone Documentation v6.0-dev, though I don't know if you'd be able to do "two stage async", we've only tried it for a single stage of fetching async SSR. Some fancy footwork may do the trick here.

The data referenced in the doc example is the listing block "configuration data", so you can write your own wrapper on the listing blocks' getAsyncData and await your additional async data.

I still think the optimal path is making sure the extra information is already served in the first call. Some enhancements to plone.restapi would be needed, but it would be worth.

Plone Foundation Code of Conduct