UpdatedAug 3, 2026

Client-Side Scripting in Astro

Question Variations

"How do you pass a variable from the frontmatter to a client-side script?"
"What happens if two different components include the same `<script>` tag?"
"Why does a script sometimes fail to run after a View Transition?"
"When should you use a client-side script instead of a framework island?"

Why This Is Asked

Since Astro encourages minimal JavaScript, knowing how to properly add client-side behavior when needed is crucial. This question tests your knowledge of Astro’s bundling system and script optimization.

Key Concepts

Bundling: How Astro handles multiple scripts on one page.
is:inline: When and why would you bypass the Astro bundler?
define:vars: Passing data from the server to a client-side <script>.
Event Handling: Best practices for adding event listeners in an MPA environment.

Question Variations

“How do you pass a variable from the frontmatter to a client-side script?”
“What happens if two different components include the same <script> tag?”
“Why does a script sometimes fail to run after a View Transition?”
“When should you use a client-side script instead of a framework island?”

Answers by Technology

+ Add Variant

AstroImprove this answer ✏️

Expected Answer

Standard <script> tags in .astro files are processed by Astro’s bundler. This means you can use import statements and TypeScript.

To pass server-side data to a script, use the define:vars directive:

---
const color = "blue";
---
<button id="myButton">Click Me</button>

<script define:vars={{ color }}>
  const btn = document.getElementById('myButton');
  btn.addEventListener('click', () => {
    console.log(`The color is ${color}`);
  });
</script>

Why It Matters

Using standard scripts is often more performant than bringing in a full framework (like React) just for a few lines of interactivity. Astro’s bundling ensures that if you use the same component 10 times on a page, the script is only loaded once in the browser.

Common Mistakes

Using is:inline unnecessarily: This prevents bundling and minification, making the JS payload larger and preventing you from using imports.
Variable scoping with define:vars: Variables passed via define:vars are serializable. You cannot pass functions or complex class instances from the server to the client this way.
View Transitions: Standard scripts run when the page first loads. If you use View Transitions, you must listen for the astro:page-load event to re-attach event listeners on navigation.

Follow-up Questions

How do you import a node module in a client-side script? (Answer: Just use a standard ESM import inside the <script> tag).
What is the difference between a script and an Island? (Answer: A script is raw DOM manipulation; an Island is a self-contained component managed by a UI framework like React/Vue).