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", andpatternvalidate 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