Building Zero-JS Baseline Web Applications with Astro & TypeScript

Modern Single-Page Applications (SPAs) have normalized shipping megabytes of compiled JavaScript bundles just to render static text, blog writeups, and documentation. On low-powered mobile devices over 4G connections, parsing and evaluating these massive bundles consumes battery, delays First Contentful Paint (FCP) by several seconds, and degrades Google’s Interaction to Next Paint (INP) metric.

Astro inverts this paradigm. By default, Astro compiles pages into 100% pure semantic HTML and CSS, shipping zero bytes of client-side JavaScript. When interactivity is required, it utilizes Islands Architecture to hydrate isolated components on-demand without blocking the main UI thread.

This publication explores the architectural principles behind building zero-JS baseline web applications that achieve flawless 100/100 Lighthouse performance scores.

1. The Frontend Bloat Crisis vs. Islands Architecture

Traditional SPAs hydrate the entire DOM tree from the root node downward:

[Traditional SPA Hydration (React / Next.js)]
Root App ---> Navbar (JS) ---> Hero (JS) ---> Content (JS) ---> Footer (JS)
(Result: 450KB - 1.2MB of JS must execute before the page is interactive)

[Astro Islands Architecture]
HTML Shell (0 KB JS)
  +--- Static Hero (Pure HTML)
  +--- Static Blog Article (Pure HTML)
  +--- [Island: Search Palette]  (Hydrated client:idle - 12KB)
  +--- [Island: AI Assistant]    (Hydrated client:visible - 18KB)
  +--- Static Footer (Pure HTML)

1. Selective Partial Hydration: Islands live as independent HTML islands. A crash in an interactive widget does not tear down the rest of the page.
2. Deterministic Hydration Directives: Developers explicitly control when and how JavaScript is loaded:
   • client:load: High-priority above-the-fold UI (e.g., critical navigation).
   • client:idle: Low-priority tools loaded after the page finishes initial render.
   • client:visible: Loaded via IntersectionObserver only when scrolled into the viewport.
   • client:media="(min-width: 768px)": Loaded only on tablet and desktop viewports.

2. Leveraging Native HTML5 Standards Over Heavy JS Libraries

Before installing a third-party npm package, reach for modern native browser capabilities:

<!-- 1. Native Accessible Modal Dialog (Replaces 45KB Modal Libraries) -->
<dialog id="contact-dialog" class="native-modal">
  <form method="dialog">
    <h2>Get in Touch</h2>
    <p>Schedule an architecture consultation.</p>
    <button type="submit" value="close">Close</button>
  </form>
</dialog>

<!-- 2. Native Accordion (Replaces JavaScript Accordion State) -->
<details class="faq-accordion">
  <summary class="faq-summary">What architectures do you build?</summary>
  <div class="faq-content">
    <p>High-concurrency microservices, autonomous AI agents, and RAG pipelines.</p>
  </div>
</details>

<!-- 3. Native Smooth CSS Tooltips (Zero JS Mouse Listeners) -->
<button class="tooltip-trigger" data-tooltip="Ctrl + K to open search">
  Search
</button>

/* Zero-JS Tooltip via Pure CSS */
.tooltip-trigger {
  position: relative;
}

.tooltip-trigger:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #18181b;
  color: #fff;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

3. High-Performance Astro Island Example

An Astro page pairing a pure static blog layout with an on-demand hydrated AI Assistant component:

---
// src/pages/blog/[slug].astro
import { getCollection, render } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import InteractiveChatbot from '../../components/Chatbot.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({ params: { slug: post.id }, props: { post } }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<Layout title={post.data.title} description={post.data.description}>
  <!-- 1. Zero-JS Static Article Body -->
  <main class="article-container">
    <header class="article-header">
      <h1>{post.data.title}</h1>
      <time datetime={post.data.date.toISOString()}>
        {post.data.date.toLocaleDateString('en-US', { dateStyle: 'long' })}
      </time>
    </header>

    <article class="prose-body">
      <Content />
    </article>
  </main>

  <!-- 2. Island: Hydrate Chatbot only when the browser main thread is idle! -->
  <InteractiveChatbot client:idle />
</Layout>

4. Core Web Vitals Benchmark Audit

Testing a high-content technical publication across an Astro zero-JS architecture versus a standard React/Next.js SPA:

5. Architectural Rules for Zero-JS Engineering

1. Static Content Layer: Use Astro’s getCollection() and glob() loaders to pre-compile markdown and content collections at build time into static HTML files.
2. Never Hydrate Layouts: Keep headers, navigation menus, and footers pure static HTML. Only hydrate individual interactive toggles (such as mobile hamburger drawers or dark mode triggers).
3. CSS Over JS for Animations: Utilize CSS keyframes and transitions instead of heavy JavaScript animation engines (Framer Motion, GSAP) for standard page transitions.
4. Font Optimization: Use self-hosted variable font packages (@fontsource-variable/inter) with font-display: swap to eliminate layout shifts during web font loading.