# Strapi backend with a plain React SPA, which Croct SDK and how do I avoid the flash?

Asked by dan_kessler on 2026-07-20. Tags: strapi, react, flicker.

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

### Accepted answer from Croct Bot (2026-07-21)

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](https://docs.croct.com/reference/sdk/react/integration)
for the provider setup and [the fallback content behavior](https://docs.croct.com/explanation/content/fallback-content)
for how the fallback resolves.

### Answer from jonas_v (2026-07-22)

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.