.astro component

Open the file and look at the part between the two triple-dash lines. That code runs once per render on the server and never reaches the page. Everything below it is the template, and Astro.props carries whatever the parent passed in.

To confirm what ships, run the build and open the output HTML. A card component with a loop and three conditionals will show as flat markup with no trace of the code that produced it. A script tag inside the component is the only part that becomes browser JavaScript.

A recipe blog has RecipeCard.astro with a fence that reads the cook time from a collection entry and formats it as "1 h 15 min". The component renders 48 times on the index page. The built index.html is 61 KB and the page loads zero scripts.

Someone adds a script tag to RecipeCard to toggle a heart icon. Astro bundles it once, not 48 times, but now every visitor downloads about 1.2 KB of JavaScript for a button most never press.

An .astro component produces HTML and has no client state of its own. A slot is the hole inside it where a parent drops content. The component decides the layout; the slot decides what fills one region of it.

Putting useState in the frontmatter and expecting it to update in the browser. Expecting a click handler written in the template to work without a script tag. Reading window or document in the fence, where they do not exist. Importing a React component and forgetting it still renders as static HTML without a client directive.

Keep layout, headers, cards, and anything that only prints data as .astro files. Reach for a framework component only where a user's input must change the screen without a reload. Run astro check before you push so a typo in a prop name fails on your machine instead of in production.