How can Alpine.js components be deployed in a production environment without flashing unwanted states?

To ship Alpine.js components in a production environment while avoiding flashes of unstyled or intermediate state, follow these steps:

1. Add the Alpine CDN build with a defer attribute so the script loads after HTML parsing but does not block rendering:

<script defer src="/packages/alpinejs/dist/cdn.js"></script>

2. Because the CDN build is self‑initializing (see source), Alpine starts automatically when the script is evaluated; no extra Alpine.start() call is needed.
3. Place component definitions (x-data, custom elements, etc.) after the script tag or inside a module that imports Alpine; this ensures the library is ready when the attributes are processed.
4. Optionally hide elements until Alpine has taken control using the x-cloak CSS technique (note: the README does not explicitly mention x-cloak, so this step is based on common practice and should be tested in your specific setup).
5. When you need to merge attribute‑based props with a component’s data function, bind props via :x-data or spread them inside the x-data expression; Alpine will merge them during its initialization cycle.

Verify that the page renders without a flash by checking the network waterfall for the deferred script and confirming that any x-cloak‑hidden elements become visible only after Alpine has initialized. If a flash persists, roll back by removing the defer attribute or moving the script to the bottom of <body> and re‑test.