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?
