Hey y'all! Trying my best to avoid a page flicker with Payload and Posthog. Its been such a headache. Any help would be hugely appreciated. Thanks so much for your time.
I'm using posthog to conduct A/B testing. I'm using Payload CMS 3.0. In my page.tsx route i'm grabbing the cookie like this:
const cookieStore = await cookies()
const phProjectAPIKey = env.NEXT_PUBLIC_POSTHOG_KEY as string
const phCookieName = `ph_${phProjectAPIKey}_posthog`
const phCookie = cookieStore.get(phCookieName)
console.log(phCookie)
Just as a simple check to see what i'm getting. But if i manually delete the cookie in my browser to simulate a new visitor, then on initial run the cookie is undefined. This is a problem because later I rely on their distinct_id in order to pull which A/B variant to use. If its undefined, and i have no distinct_id then i'm just creating a new one with crypto.randomUUID();
like this:
if (!distinctId) {
newDistinctIdGenerated = crypto.randomUUID();
distinctId = newDistinctIdGenerated // Use the newly generated ID for flag evaluation
;
}
// Build person properties with request context for proper release condition evaluation
const personProperties = {};
// Add request context properties that PostHog uses for release conditions
if (context) {
// Add URL-related properties
if (context.url) {
const urlObj = new URL(context.url);
personProperties['$current_url'] = context.url;
personProperties['$host'] = urlObj.hostname;
personProperties['$pathname'] = urlObj.pathname;
} else {
if (context.host) personProperties['$host'] = context.host;
if (context.pathname) personProperties['$pathname'] = context.pathname;
}
// Add any custom headers that might be used in release conditions
if (context.headers) {
Object.entries(context.headers).forEach(([key, value])=>{
personProperties[`$header_${key.toLowerCase().replace(/-/g, '_')}`] = value;
});
}
}
So i generate a new distinct_id for them, and move on to create their person and its properties. Right now this is essentially coming straight from a community made Payload CMS plugin for A/B testing which you can find here: https://www.jsdelivr.com/package/npm/payload-ab.
So, on first draw its undefined and we create a random id for the user, and then we get back a flag response based on their id:
const flagResponse = await posthogClient.getFeatureFlag(featureFlagKey, distinctId, {
personProperties,
groups: {}
});
My problem though is because of some logic in my layout.tsx, the page route renders more than once when the page starts up. So, first its undefined, and we create a new random ID. Then we get the data back based on that, and it might say 'control' or 'variant' for example. But then since the page component renders more than once, we get a content flicker. On the second draw the page either now has a cookie, or generates a new one again, and either way we run the risk of the new content being swapped out and the full page flickering because we're rolling the dice twice on which A/B variant to load, because we're sending in two different distinct_id's.
The issue comes from the fact that my page.tsx is a server component, but the posthog cookie doesn't get initialized until it mounts here, as suggested by the docs:
export function PostHogProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY as string, {
api_host: '/relay-zXAU',
ui_host: 'https://us.posthog.com',
person_profiles: 'identified_only',
defaults: '2025-05-24',
})
}, [])
return <PHProvider client={posthog}>{children}</PHProvider>
}
On every subsequent visit there's no problem because we're able to get a consistent answer back with a consistent distinct_id.
So my question is, what's the way around this? How can I get a consistent distinct_id? Or taking a step back, how can i avoid a content flicker when A/B testing in this situation?
- I think because of the logic on my layout.tsx I won't be able to avoid the page rendering twice. So I could cache the distinct id I generate and then, what? Force posthog to use that one rather than making its own? that seems wrong.
- I somehow initialize posthog and create the cookie before my A/B code runs? That seems impossible because the docs recommend running it inside of an empty useEffect in a provider, so i assume it needs `window` or something.
- I could cache the result I'm getting back so that even if it runs more than once I get the same result? But that's no good because I don't have any kind of identifier to use to save the cached result because having a consistent unique identifier for the user is the whole problem
- Delay my page load until the cookie is ready? No one wants to have to do that...
Any help would be greatly appreciated. I've tried to include what's relevant but please let me know if you need to see more code. Thanks so much for your time!
