



Astro’s idea of a component script was directly inspired by this concept. If you’ve ever written Markdown before, you may already be familiar with a similar concept called frontmatter. The Component Script Section titled The Component ScriptĪstro uses a code fence ( -) to identify the component script in your Astro component. When your Astro component does need client-side interactivity, you can add standard HTML tags or UI Framework components. The result is a faster site, with zero JavaScript footprint added by default. You can include JavaScript code inside of your component frontmatter, and all of it will be stripped from the final page sent to your users’ browsers. They render to HTML either at build-time or on-demand using server-side rendering (SSR). The most important thing to know about Astro components is that they don’t render on the client. Astro components can even contain an entire page layout. At other times, an Astro component may contain a smaller snippet of HTML, like a collection of common tags that make SEO easy to work with. Often, an Astro component will contain some reusable UI on the page, like a header or a profile card. astro.Īstro components are extremely flexible. You can spot an Astro component by its file extension. They are HTML-only templating components with no client-side runtime. Astro components are the basic building blocks of any Astro project.
