UpdatedAug 3, 2026

Astro Component Architecture

Question Variations

"Explain the lifecycle of an Astro component."
"How do you pass data from a parent component to a child component?"
"Can you use `console.log` in the frontmatter? Where does it output?"
"What is the difference between a `.astro` component and a `.jsx` component?"

Why This Is Asked

Understanding the boundary between server-side logic and client-side templates is the most fundamental skill in Astro. Interviewers want to ensure you know what code runs where and how to structure a basic component.

Key Concepts

Frontmatter: What kind of code belongs between the --- fences?
Scoped Styles: How does Astro prevent CSS leakage without using Shadow DOM?
Slots: Using named slots vs. default slots for layout patterns.
Fragment Syntax: Using <> for multiple root elements.

Question Variations

“Explain the lifecycle of an Astro component.”
“How do you pass data from a parent component to a child component?”
“Can you use console.log in the frontmatter? Where does it output?”
“What is the difference between a .astro component and a .jsx component?”

Answers by Technology

+ Add Variant

AstroImprove this answer ✏️

Expected Answer

Astro components use a superset of HTML. The frontmatter script (top part) runs during the build (for static) or on the server (for SSR) and is stripped out before the page reaches the user.

---
// Component Script (Server-only)
const { title = "Default Title" } = Astro.props;
const data = await fetch('...').then(r => r.json());
---
<!-- Template (HTML/JSX) -->
<article>
  <h1>{title}</h1>
  <slot /> <!-- Children are injected here -->
</article>

<style>
  /* Scoped CSS */
  h1 { color: red; }
</style>

Why It Matters

Because the frontmatter only runs on the server, you can perform sensitive operations like fetching data from a database using private API keys without worrying about leaking those keys to the client. The Scoped CSS feature is also high-signal; it uses unique data attributes to ensure styles don’t conflict, similar to Vue’s scoped styles.

Common Mistakes

Assuming frontmatter runs in the browser: Trying to use window or document inside the --- fences will cause a “ReferenceError: window is not defined” because that code runs in a Node/Edge environment.
Mixing up Slots: Forgetting that <slot /> is for child elements and {prop} is for data.
Global Styles: Putting styles in a <style> tag and expecting them to affect other components. You must use <style is:global> for that.

Follow-up Questions

Can you use TypeScript in the frontmatter? (Answer: Yes, Astro has built-in support for TypeScript in every .astro file).
How do you handle conditional rendering? (Answer: Using standard JavaScript logic like {isLoggedIn && <Dashboard />} or ternary operators).