Ideas for Arc XP

We have personalized content on our pages (e. g. recommendations for articles or a home location selected by the user). This content is fetch client side to have it individual based on the user.

In the context of this idea the content are lists of teasers (with a link to an article detail page) e.g. on homepages.

For server-side rendering and as a fallback if no personalized teasers are available (e.g. due to technical failure) we use non-personalized teasers from the Content API to render the articles teasers. These teasers get replaced by the personalized content once its available.

For all our server-side rendered teaser lists (not only personalized lists) we use the <Static> wrapper together with staticMode=true in the useContent call. This way the lists don't need to be rendered client-side and we can save HTML-size by not including the article data.

If there is personalized content, we remove the static content from server-side (the content that is wrapped in <Static>) and replace it with the client-side rendered personalized teaser list.

This works fine if we know this during the first render pass and can directly remove the static content. However, it does not work in cases where we want to remove it after the first render pass. Then the enter and exit divs are removed, but the actual content inside of the <Static> wrapper are not removed as expected.

Use cases for this are:

• Personalized recommendations are only fetched after the use has consented to the CMP terms. Once fetched the personalized recommendations can replace the static content.

• The user has initially on home location set. Once he selects a home location, we fetch the latest news for this location and replace the static content with the specific location content.

Here is a short reproduction example of the static content removal after the first render pass:
import { JSX, useEffect, useState } from 'react';
import Static from 'fusion:static';

import { FeatureProps } from '~types/fusion/FeatureProps';

function StaticTest(props: FeatureProps): JSX.Element {
const [shouldShowStaticContent, setShouldShowStaticContent] = useState(true);

useEffect(() => {
// This is a dummy effect to reproduce the bug. In a real scenario, there is some more logic.
setShouldShowStaticContent(false);
}, []);

return (
<>
{shouldShowStaticContent && (
<Static id={props.id}>
<p>Static content</p>
</Static>
)}
<p>Dynamic content</p>
</>
);
}

StaticTest.label = 'StaticTest';

export default StaticTest;

Since I thought this is a bug in PageBuilder Engine, I created this ACS ticket: https://arcpublishing.atlassian.net/servicedesk/customer/portal/2/ACS-38719. There I was told to create an idea instead. Please let me know if this is not the correct place.