Expand my Community achievements bar.

Next.js Server Side Rendering - Adobe Target Flickering issue

Avatar

Level 1

I have a Next.js application where I'm using at.js to retrieve and apply personalized offers. The application is server-side rendered, but the offers are fetched and applied client-side. This results in a flicker: the site initially loads with the default content from the server, then at.js fetches the offers, and the UI updates, causing a visible change.

 

I attempted to use the anti-flicker code provided in the Adobe Target documentation (https://experienceleague.adobe.com/en/docs/target-dev/developer/client-side/at-js-implementation/at-...). I added the code as the first element inside the <head> tag. However, the flicker persists. I believe this is because the server-rendered content becomes visible to the user almost immediately, before the anti-flicker code can execute. So, for a brief period, the user sees the initial, unpersonalized content.

 

I've experimented with other solutions, and setting opacity: 0 on the body element, then changing it to opacity: 1 after getOffers completes, seems to work. But I consider this approach a bit of a hack.

 

Is there a more elegant solution to prevent this flicker?

2 Replies

Avatar

Employee Advisor

Hi @AshokRa2 

 

Are you using getOffer aplyOffer on client side to deliver target activities? or the Target is implemented using Adobe launch?

Avatar

Level 1

Not using adobe launch... using getOffer and applyOffer on client side only...