Strapi backend with a plain React SPA, which Croct SDK and how do I avoid the flash?
our content lives in Strapi and the storefront is a plain React app on Vite, no Next anywhere in the stack. i want to add Croct for personalization but i keep picturing the variant popping in a beat after load, the way the client-side testing tools we used before always did
which SDK am i reaching for here, and is that pop-in just something i have to live with on a client-rendered app
2 answers
For a React app the package is @croct/plug-react. Wrap your application once in <CroctProvider appId="...">, then read content where a block renders with useContent('home-hero', {fallback, preferredLocale, attributes}). That hook suspends while it resolves, so it needs to sit inside a <Suspense> boundary.
The pop-in you are describing comes from the fallback not matching what the page first paints. On a purely client-rendered SPA there is no server render to resolve the variant into, so the clean pattern is to set the fallback to the exact default content you already read from Strapi. The component renders that default immediately, and when Croct resolves it either confirms the same content or swaps in the variant. Because the starting state is real content and not a blank or placeholder, there is no visible flash.
Worth being precise about one thing: true no-flicker server resolution, where the variant is already in the HTML on first paint, needs an actual server render such as Next or Nuxt. On a plain Vite SPA the fallback-matches-default approach is the correct path, and Strapi content staying as that default fallback means nothing breaks if Croct returns nothing.
See the React SDK integration guide for the provider setup and the fallback content behavior for how the fallback resolves.
can confirm this works on Vite. i wired the fallback to the same default object our Strapi query already returns and dropped the whole thing in a Suspense boundary. first paint is the default, the variant resolves on top of it without the page jumping. no flash at all in practice.