How to instantiate variant of a component without hydration?

Given a simple component with two variants:
• V1: Image on left, text on right
• V2: Text on right, image on left
We have a screen that instantiates this component twice, one using V1, and the other using V2

We are doing server side rendering, and it looks like the component selection is not carried out ahead of time and with CSS, and rather happens when we execute JS on the page after… This is a problem because we would really like to not hydrate this page, bu tin that case, the variant selection does not work

Can you point me to which project and screen and component?

• Project:
• Page: “Home”
• Component: “Ecomm Block Module”
Pic below is when it renders correctly. If I turn off hydration the images both show on the same side. I think this one also flickers into position on render when js is enabled (due to js fixing it up)


Thanks for looking into it @yang

I see - it’s because the prop that swaps the layout is itself a varianted setting:

When the screen is Tablet or larger, then this React prop needs to get set (in the narrow base variant, it’s off)

@yang IMO it should be possible for plamic to lower this into CSS rules…

For responsive design, you will need to stick to CSS-only (style-only) changes to avoid needing React re-evaluation

But for now, how do we deal with this?

Do we have to break the component into two separate versions?

I would recommend editing the Ecomm Block Module component itself to be responsive

You can alternatively instantiate two Ecomm Block Modules, one with Swap disabled and one with enabled, and make one of them visible vs hidden at a time - this will also use pure media queries

For the first solution, if you wanted to, you could create a Combo Variant: when Tablet+ AND Swap is on, only then check the Reverse box

otherwise, normally, when Swap is on and you’re on the base (mobile) variant, no need to check the Reverse box

Let me know if that makes sense!

@yang aha… I did not realize that the variant param actually changed between screens… I get it. If we can have it statically set across all screens, then it should be lowered to pure CSS, right?

So we just have to make sure the “Swap Blocks” setting enabled is responsivve…


Thank you!