Astro Components

Astro components are self-contained building blocks (.astro files) that bundle HTML structure, styling, and logic into a single file. Unlike React or Vue components, they run entirely at build time and output pure HTML with zero JavaScript sent to the browser by default. You can nest them inside each other, pass data into them, and even mix in React or other framework components when you need interactivity.

The Simple Version

Think of a component as a LEGO brick for your website. The header is one component. The footer is another. A blog post card is another. Each one is a self-contained piece that you can reuse across pages. Astro components are special because they render to pure HTML at build time, meaning visitors’ browsers don’t need to download any JavaScript to display them.

This is different from React components, which typically require JavaScript to run in the browser.

Why It Matters

Components keep your code organized and your site fast. Instead of copying and pasting the same header code on every page, you write it once as a component and use it everywhere. If you need to change the header, you change it in one place and every page updates automatically.

Astro components are particularly efficient because they compile to static HTML. The visitor’s browser just receives a finished page, not a bundle of JavaScript that needs to be executed.

How It’s Used on This Site

Almost every visual element on this site is an Astro component: Header, Footer, Hero, Projects, About, Services, Contact, DictionaryTeaser. They’re composed together in page layouts and compile to fast, static HTML at build time.