Async Components with SPAs

Hello,

I haven’t seen any documentation on this so I want to throw the question out there.
Does SPA/Pagemodel API/ SPA SDKs support async components? If so how does that work or how does do we implement it?

Thanks,

Tim

Hi Tim,

Marking an hst:component node with hst:async = true skips the ‘real
rendering’ and only returns the component meta like parameters and the
‘self-link’ eg

ua2eff2d2920546e7a5bcebba99629c17:
{
id: “p1_p5”,
links:
{
self:
{
href:
https://brx-saas.eng02.bloomreach.cloud/delivery/site/v1/channels/brxsaas/pages?_hn:type=component-rendering&_hn:ref=p1_p5”,
type: “external”
}
},

In the json above, we do not return the flag async : true so in the
SPA it is kind of hard to know whether the component is async or not.

After that, calling
https://brx-saas.eng02.bloomreach.cloud/delivery/site/v1/channels/brxsaas/pages?_hn:type=component-rendering&_hn:ref=p1_p5
hits the async component explicitly, and then it gets rendered.

However the above works, I am curious about your use case. In
general, commerce components for example can be ‘seen’ as async, since
such a component typically only contains configuration with which the
SPA for example invokes a federated call to eg a commerce backend.
Handling this async can best be done in the SPA and is a choice of the
developer: pretty much two flavors: do it server side with a potential
delay, or first serve the SPA to the browser and from there do an
async all to a commerce backend (hydration) : that way you still have
a fast above the fold initial rendering, and the slower parts can be
done async. Every component in the BRC SaaS backend should render
fast, so making those async in general should not be needed

Regards Ard

Hi @ard.schrijvers

I ask because we have a few components that we uses targeting data to get personalized data from CRISP calls in the doBeforeRender method. We noticed that with this we are not able to cache pages with those components using the HST Page Caching feature. We were thinking that if we marked those as Async the rest of the page would be cached then the personalized components could be loaded after.

From a few quick tests it seems like when you call the component renewer link it doesn’t get targeting data so that breaks our CRISP APIs.

Thanks,
Tim