#Performance

4 messages · Page 1 of 1 (latest)

slow zodiac
#

How many Astro islands is too many islands? Using SolidJS

main trailBOT
#

Hi @slow zodiac. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The knowledge sources don't specifically address how many Astro islands is "too many" when using SolidJS components. However, I can provide some general insights about Astro islands and performance considerations.

Astro's islands architecture is designed to be performance-focused by default. Each interactive island (using frameworks like SolidJS) adds JavaScript to your page that wouldn't otherwise be there with static HTML. The key principle is to use islands judiciously:

  1. Performance Impact: Astro was built to minimize JavaScript, with studies showing performance impacts on conversion rates and user engagement. For example, research shows that "Astro website can load 40% faster with 90% less JavaScript" compared to sites built with popular React frameworks.

  2. Islands in Isolation: Each island "runs in isolation from other islands on the page" and is "hydrated separately from the rest of the page," which helps with performance but still adds to the overall JavaScript bundle Islands Architecture.

  3. Strategic Usage: The ideal approach is to use islands only where interactivity is needed. As the documentation states: "Islands architecture works by rendering the majority of your page to fast, static HTML with smaller 'islands' of JavaScript added when interactivity or personalization is needed" Islands Architecture.

  4. Parallel Loading: One benefit is that islands load in parallel and hydrate independently, so a low-priority component doesn't block a high-priority one Client Islands.

#

Rather than focusing on a specific number, consider:

  • Using islands only for components that truly need interactivity
  • Leveraging client directives like client:idle or client:visible to optimize loading
  • Monitoring your site's performance metrics as you add islands

The Astro philosophy is "It should be nearly impossible to build a slow website with Astro" - but this assumes you're following their guidance of using islands sparingly and strategically.

I'd recommend testing your specific implementation with performance tools to determine the optimal number for your particular use case with SolidJS components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: