<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Content</h2>
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#the-types-of-websites-you-build">The types of websites you build</a></li>
<li><a href="#the-use-case">The Use case</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction</h2>
<p>We’re going to talk about Astro.</p>
<p>Most folks see Astro as yet another framework but I think there is something more to it.</p>
<p>There is an unique use case for Astro that many folks are not talking about!</p>
<p>Before we talk about the use case, let’s review some of the key features of Astro.</p>
<p><strong>The key features include:</strong></p>
<ul>
<li>
<p><strong>Static (by default)</strong> - You can build your website using Javascript but the output is just a static site by default in Astro (Zero JS by default)</p>
</li>
<li>
<p><strong>Partial Hydration</strong> - Usage of the “island architecture” to selectively add interactive components into the website</p>
</li>
<li>
<p><strong>Flexible Framework support</strong> - Astro takes a compiler first approach, meaning it supports many frontend frameworks (React, Svelte, Vue etc)</p>
</li>
</ul>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/astro-stack-cutting-through-layers.png" alt="Astro: Cutting through the frameworks" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Astro: Cutting through the frameworks (A main selling point of Astro)</blockquote>
  </div>
</div>
<p>These key features make Astro well suited for these specific scenarios.</p>
<p>Before we start that discussion, let’s start by looking at the different types of websites we build as developers.</p>
<p>This will help us to see which type of sites is most suited to be built with Astro.</p>
<h2 id="the-types-of-websites-you-build"><a href="#the-types-of-websites-you-build" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The types of websites you build</h2>
<p>If we take a step back and look at the types of website we build, the sites tend to falls into these 5 categories.</p>
<p><strong>Here is what the spectrum looks like:</strong></p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/astro-stack-types-of-sites-you-build.png" alt="Types of Site you build" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Types of Site you build (H/t to FredKSchott for the original)</blockquote>
  </div>
</div>
<p>It can be further divided into the sub-categories:</p>
<ul>
<li>
<p><strong>Content Focused (more static)</strong> - Marketing, Publishing, Ecommerce</p>
</li>
<li>
<p><strong>Interaction Focused (more dynamic)</strong> - Ecommerce, Stateful, Apps</p>
</li>
</ul>
<p>The capabilities of Astro fits within the ranges of <strong>Marketing, Publishing and Ecommerce</strong> very well.</p>
<p>However, if you look at most companies, it typically is a combination of both.</p>
<p>You typically have a product then you also have a separate marketing site.</p>
<p>You may ask — Ok, how does Astro fit into this picture ?</p>
<h2 id="the-use-case"><a href="#the-use-case" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The Use case</h2>
<p>The use case that that many folks are not talking about is using Astro for rapid experimentation and prototyping (especially at scale).</p>
<p>So, that means using it for within the Marketing, Publshing and Ecommerce context when you already have a product in place.</p>
<p>This will allow you to re-use some of the code from existing Product (APIs, Components etc) to quickly build your prototypes or experiments separate from the product codebase.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/astro-stack-experimentation-stack.png" alt="Astro: Experimentation Stack" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Astro: Experimentation Stack</blockquote>
  </div>
</div>
<p>Again, this an underrated use case because most folks see Astro as just another framework.</p>
<p>When applied in this way, I see it leveraging the full strength of what Astro has to offer.</p>
<p>I supose a good slogan to describe this process would be: <strong>Build simple, fast sites while leveraging existing code.</strong></p>
<h3 id="why-cant-i-just-use-our-existing-stack-to-do-this-"><a href="#why-cant-i-just-use-our-existing-stack-to-do-this-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Why can’t I just use our existing stack to do this ?</h3>
<p>In reality, you can use any stack to do this.</p>
<p>Astro just fits this use case a lot better (<strong>categories:</strong> Marketing / Publishing / Ecommerce).</p>
<p>This is the use case that it was originally designed for.</p>
<p><strong>I guess it comes down to:</strong></p>
<ul>
<li>
<p>The level of fidelity of your experiments and prototypes</p>
</li>
<li>
<p>The quantity of experiments and prototypes</p>
</li>
</ul>
<p>If we are talking about large quantities and high to medium fidelity prototypes and experiments, Astro definitely wins in this category.</p>
<p><strong>Astro’s advantages (compared to other frameworks):</strong></p>
<ul>
<li>
<p>Great balance between flexibiltiy (Island architecture) and baseline performance (static by default)</p>
</li>
<li>
<p>Simplicity in deployment (Astro build outputs just html, js, css by default)</p>
</li>
</ul>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/astro-stack-experimentation-at-scale.png" alt="Astro: Experimentation at scale" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Astro: Experimentation at scale</blockquote>
  </div>
</div>
<p>While the newer versions Astro provides features to build more complex sites (ie with SSR and API), I still see Astro being most powerful in this “sweet spot”.</p>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Conclusion</h2>
<p>And there you have it!</p>
<p>A different way of looking at how Astro can be used to its fullest potential.</p>
<p>And of course, the code that you re-use doesn’t have to be from a product, it can be any existing codebase (as long as Astro supports the framework).</p>
<p>You can re-use the code to come up with prototypes, and experiments without having to build something from scratch.</p>
<p>I hope this helps you to see Astro in a different way!</p>
<p>Give it a try, and let me know what you think.</p>
<p>If you enjoyed that or learned something new, please share this article with a friend or co-worker 🙏❤️! (Thanks!)</p>


Jerry Chang

Go Back

Astro: One idea to change your view about it (FOREVER)

Enjoy the content ?