Static Builds
Since Astro components require server-side rendering via the Container API, static builds (storybook build) use a build-time pre-rendering approach.
How it works
Section titled “How it works”-
SSR Server — During the Vite build,
vitePluginAstroBuildPrerendercreates an internal Vite SSR server with AstroContainer. -
Story Discovery — For each story file that imports an
.astrocomponent, the plugin loads the full story module viassrLoadModuleto get fully evaluated args (including imported assets like images). -
Pre-rendering — Each story variant is rendered using AstroContainer with its merged args (meta-level + story-level).
-
HTML Injection — The pre-rendered HTML is injected as a
parameters.__astroPrerenderedproperty on each story export. -
Asset Emission — Any
/@fsdev-server asset URLs (e.g. images) in the rendered HTML are emitted as Rollup assets with content-hashed filenames, and the URLs are rewritten to their final paths. -
Client Runtime — At runtime, the renderer detects the pre-rendered HTML parameter and uses it directly, bypassing the HMR-based render path.
Limitations
Section titled “Limitations”- No interactive Controls — Since Astro components are pre-rendered at build time, the Controls panel cannot re-render them with different args. This only affects Astro components — framework component stories (React, Vue, etc.) remain fully interactive. In static builds, the package automatically disables all control inputs for Astro stories and shows an ℹ️ Astro info row in the Controls table so viewers understand why. No configuration is needed.
- No story-level component override — Stories that override the meta-level
componentare not pre-rendered. - Dev mode unaffected — In
storybook dev, all components render on-demand and Controls work as expected.
Future considerations
Section titled “Future considerations”A future enhancement could add a companion server or service worker to enable live re-rendering of Astro components with different args in static builds.