Horrible CLS on Nuxt3 Hydration with A/B Test

I have a Nuxt3 SSR setup, and when I have an A/B Test running I get a horrible CLS. The whole page flashes, and then each block staggers in client side. This doesn’t happen when a page has no A/B test on it.

I’m using the @builder.io/skd-vue/vue3 v0.7.0 package, and rendering content through the RenderComponent that is provided.

The SSR comes in perfectly, but the second that the client hydrates, the whole page resets and then each block staggers in.

I’ve been able to track it in the Network tab and see that when the BlockWrapper resolves client side it resets the DOM.

When I route between pages I do not have the CLS, it’s only on SSR handoff to the client.

Would love any feedback on what I can do to resolve this.

I was able to resolve this by using @builder.io/skd-vue v0.4.5 instead of v0.7.0.

Following up on this now that v0.12.3 was released and I’m still having the same issue. I would really like to be able to stay in sync with the current SDK, but this CLS issue is forces me to lock of the SDK version at 0.4.5