--- title: How Astro is built | daily.dev description: A deep dive into how Astro's build pipeline works, tracing a single .astro page with a React island from source file to final HTML in dist. Covers the full... canonical: https://daily.dev/posts/how-astro-is-built-vvxmcldse twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How Astro is built | daily.dev og:description: A deep dive into how Astro's build pipeline works, tracing a single .astro page with a React island from source file to final HTML in dist. Covers the full... og:url: https://daily.dev/posts/how-astro-is-built-vvxmcldse og:image: https://api.daily.dev/og/posts/VvxmcLDsE.png og:image:alt: How Astro is built og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How Astro is built **[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 18 min read · 2 upvotes · 0 comments ## Summary A deep dive into how Astro's build pipeline works, tracing a single .astro page with a React island from source file to final HTML in dist. Covers the full pipeline: CLI entry, config loading, route scanning, content collection sync, Vite configuration, the Rust-based compiler (compiler-rs) that transforms .astro files into JavaScript modules, Vite's three-environment build (prerender, SSR, client), server-side rendering using the same renderer for both static and on-demand pages, island hydration with client directives like client:visible, and adapter-based packaging for server deployments. Also includes a minimal from-scratch implementation demonstrating the core server-render-then-hydrate pattern, plus a breakdown of what can go wrong at each build stage. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How does Astro's build process turn a .astro file into the final HTML in dist? Astro's Rust-based compiler-rs parses each .astro file into a server module plus metadata (styles, scripts, hydrated components), then Vite 8 with Rolldown links that module to the rest of the project across prerender, server-side rendering, and client build environments. Astro imports the resulting server bundle into Node.js and calls its render() function to produce a Response, whose bytes are written to files like dist/index.html. _Anyone debugging an Astro build can dig deeper into this pipeline through daily.dev._ ### What does the client:visible directive do in Astro? It tells Astro to still render the component's initial HTML on the server but also create a browser entry point for hydration once the component becomes visible. An IntersectionObserver watches the island's children, and only when one becomes visible does the browser dynamically import the compiled component and its framework's hydration runtime, then attach interactivity to the existing server-rendered HTML. _Developers tuning Astro island hydration strategies can track these directive behaviors on daily.dev._ ### Does Astro use different rendering code for static builds versus server-rendered pages? No, Astro uses the same renderer for both. A static build creates a standard Request, passes it through the built application's render() method, and saves the resulting Response as bytes to disk, while on-demand rendering sends a real request through the identical application code. This shared model reduces differences between output modes for routing, middleware, and page rendering. _Teams choosing between static and SSR output modes can compare Astro's approach via daily.dev._ ## Similar posts on daily.dev - [Astro 7.0](https://daily.dev/posts/astro-7-0-2arekjquc) · Astro · 202 upvotes · 14 comments - [How to build an Astro integration](https://daily.dev/posts/how-to-build-an-astro-integration-80rlhli9m) · Flavio Copes · 0 upvotes · 0 comments - [Astro vs Next.js: Two Philosophies for Building the Modern Web](https://daily.dev/posts/astro-vs-next-js-two-philosophies-for-building-the-modern-web-nuyffqrn4) · Codemotion · 2 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#rust](https://daily.dev/tags/rust), [#vite](https://daily.dev/tags/vite), [#astro](https://daily.dev/tags/astro) [View this post on daily.dev](https://daily.dev/posts/how-astro-is-built-vvxmcldse) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How Astro is built","url":"https://daily.dev/posts/how-astro-is-built-vvxmcldse","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-astro-is-built-vvxmcldse"},"datePublished":"2026-08-08T11:20:20.302Z","dateModified":"2026-09-14T07:30:12.062Z","description":"A deep dive into how Astro's build pipeline works, tracing a single .astro page with a React island from source file to final HTML in dist. Covers the full...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7219243bb6b6113ecc90bd933965a4ef?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7219243bb6b6113ecc90bd933965a4ef?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Flavio Copes","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Flavio Copes","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/1f2dbd275797411bbd37bfdaaf0951a9","url":"https://daily.dev/sources/flaviocopes"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-astro-is-built-vvxmcldse","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,rust,vite,astro","timeRequired":"PT18M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Flavio Copes","item":"https://daily.dev/sources/flaviocopes"},{"@type":"ListItem","position":3,"name":"How Astro is built"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-astro-is-built-vvxmcldse#faq","mainEntity":[{"@type":"Question","name":"How does Astro's build process turn a .astro file into the final HTML in dist?","acceptedAnswer":{"@type":"Answer","text":"Astro's Rust-based compiler-rs parses each .astro file into a server module plus metadata (styles, scripts, hydrated components), then Vite 8 with Rolldown links that module to the rest of the project across prerender, server-side rendering, and client build environments. Astro imports the resulting server bundle into Node.js and calls its render() function to produce a Response, whose bytes are written to files like dist/index.html. Anyone debugging an Astro build can dig deeper into this pipeline through daily.dev."}},{"@type":"Question","name":"What does the client:visible directive do in Astro?","acceptedAnswer":{"@type":"Answer","text":"It tells Astro to still render the component's initial HTML on the server but also create a browser entry point for hydration once the component becomes visible. An IntersectionObserver watches the island's children, and only when one becomes visible does the browser dynamically import the compiled component and its framework's hydration runtime, then attach interactivity to the existing server-rendered HTML. Developers tuning Astro island hydration strategies can track these directive behaviors on daily.dev."}},{"@type":"Question","name":"Does Astro use different rendering code for static builds versus server-rendered pages?","acceptedAnswer":{"@type":"Answer","text":"No, Astro uses the same renderer for both. A static build creates a standard Request, passes it through the built application's render() method, and saves the resulting Response as bytes to disk, while on-demand rendering sends a real request through the identical application code. This shared model reduces differences between output modes for routing, middleware, and page rendering. Teams choosing between static and SSR output modes can compare Astro's approach via daily.dev."}}]} ```