Building Interactive Components with Astro and SolidJS

After building several interactive components for this site, I’ve learned valuable lessons about combining Astro’s island architecture with SolidJS’s fine-grained reactivity. This pairing creates lightning-fast sites with interactive elements exactly where you need them.

The Philosophy

Astro’s Approach → Ship zero JavaScript by default
SolidJS Enhancement → Add reactivity only where needed
Result → Best of both worlds

Practical Implementation

Search Component

The site’s search functionality demonstrates this approach perfectly:

// Search.tsx - SolidJS component
import { createSignal, createMemo } from 'solid-js'

export default function Search({ data }) {
  const [query, setQuery] = createSignal('')
  
  const filteredResults = createMemo(() => 
    data.filter(item => 
      item.data.title.toLowerCase().includes(query().toLowerCase())
    )
  )
  
  return (
    <input 
      onInput={(e) => setQuery(e.target.value)}
      placeholder="Search..." 
    />
    // Results rendering...
  )
}

<!-- search/index.astro -->
<PageLayout>
  <Search client:load data={searchData} />
</PageLayout>

Key Benefits

Selective Hydration → Only search component gets JavaScript
Fast Initial Load → Page renders immediately as static HTML
Reactive Updates → SolidJS handles user interactions efficiently

Performance Wins

• 97+ Lighthouse scores across all metrics
• Sub-second page loads on 3G connections
• Minimal bundle sizes - only 20KB total JavaScript
• Island isolation - component failures don’t break the page

Best Practices Learned

1. Use client:load Sparingly

Only for components that need immediate interactivity:

<Search client:load />          <!-- Good: User expects instant search -->
<Header client:idle />          <!-- Better: Navigation can wait -->
<Footer />                      <!-- Best: Static content -->

2. Prefer Static Where Possible

Many “dynamic” features work fine as static HTML:

• Navigation menus
• Contact forms (with progressive enhancement)
• Content cards and layouts

3. Leverage SolidJS’s Compilation

SolidJS compiles to vanilla JavaScript with zero runtime overhead for simple components.

Real-World Impact

Before: React-based blog = 400KB JavaScript bundle
After: Astro + SolidJS = 20KB total with better UX

The difference is dramatic both for users and developers.

Development Experience

# Hot reload just works
npm run dev

# TypeScript support out of the box
# No configuration needed

# Component debugging is straightforward
# Each island is isolated and testable

When to Choose This Stack

Perfect For:

• Content sites with interactive elements
• Blogs with search/filtering
• Portfolios with contact forms
• Documentation sites

Consider Alternatives For:

• Highly interactive SPAs
• Real-time collaborative tools
• Complex state management needs

Next Steps

Planning to explore:

• Server-sent events for real-time features
• View transitions API integration
• Progressive Web App capabilities

The Astro + SolidJS combination strikes an excellent balance between performance and capability. It’s become my go-to for content-focused sites that need selective interactivity.

Resources:

• Astro Islands Documentation
• SolidJS Performance Guide
• This site’s source code