Islands and deployment

Start with zero JavaScript

Inspect an Astro page as HTML first and add client code only for behavior the browser must perform.

An Astro page ships zero JavaScript by default. Loops, conditionals, imported components, layouts, collections: all of it renders to HTML on the server, and the browser gets HTML.

Let’s prove it. Open any page of your notes site with DevTools on the Network panel. Filter by JS. Reload.

The list is empty. No framework runtime, no hydration script, no bundle to explain. If you do see something, it’s either a <script> tag you wrote or a component with a client:* directive. Every byte of JavaScript on an Astro page is there because someone asked for it.

Interactive doesn’t mean JavaScript

Before you reach for a script, ask what behavior is actually missing. The browser already gives you a lot:

  • links navigate
  • forms submit, and required, type="email", and pattern validate before anything is sent
  • <details> and <summary> open and close
  • <video> and <audio> come with controls
  • CSS handles responsive layout, hover states, and transitions

Add this to a page:

<details>
  <summary>Show the answer</summary>
  <p>Astro rendered this on the server.</p>
</details>

Click the summary. It opens. Click again. It closes. Check the Network panel. Still nothing. That’s interactivity with zero JavaScript, and it works with the keyboard and with screen readers without extra effort from you.

When you do need a script

Reach for JavaScript when the browser has to hold state that changes, react to custom events, or call an API only the browser has, like geolocation or the clipboard. A live search box, a chart that updates, a drag-and-drop list. Those are real cases.

Even then, the HTML comes first. Render the content as HTML, then let the script improve it. If the script fails to load, the page should still make sense.

Not a contest

Zero JavaScript is the starting point, not a badge. Nobody wins by shipping the least code. The goal is that every script on the page has a purpose you can say out loud. “The menu needs aria-expanded to update.” “The filter hides notes by topic.” Fine. “It was in the starter template.” Not fine.

Do the Network panel check on a site you built before Astro. Count the JavaScript requests. Then ask, for each one, what it does for the visitor. Most of us can’t answer for half of them.

Lesson completed