Day2 - Astro Series: Problem and Solution

Astro Series Day 2: Existing Problems and Solutions

@ Astro

A beautiful gradient background with the title: "Existing Problems and Solutions"

Introduction

As mentioned earlier, Astro is a framework focused on “static content” and allows JavaScript to be shipped and executed only when necessary. To understand the advantages of Astro, it’s crucial to comprehend the existing problems and further explore what “static websites” and “dynamic websites” are.

Static Websites vs. Dynamic Websites

  • Static Websites: The site consists of files, commonly HTML, CSS, JS, images, etc., hosted on a web server, where users can request these files and the server simply delivers them.
  • Dynamic Websites: The server dynamically generates page content when a user requests a page and provides it to the user.

One can imagine that static and dynamic websites each have their pros and cons. The issue is not “which method is superior?” but rather “which method better meets the needs?” Static websites are standardized but cheap and easy to deploy, while dynamic websites are flexible but significantly more complex and expensive, much like frozen pizza versus hand-made pizza.

Freshly baked pizza next to the oven

Fortunately, there are many frameworks today that allow us to freely switch rendering times and modes for web pages. The methods of rendering web pages can be collectively referred to as “Rendering Patterns,” which impact both user and developer experiences. Since rendering modes and web performance metrics are separate and independent topics, here are some related articles I have written for further reading:

Existing Problems

Traditionally, for multi-page static websites, tools like Jekyll, Hexo, Hugo, and 11ty were used, utilizing template languages, or meta-frameworks like Gatsby, Next, and Nuxt were employed to write React or Vue to generate pages. This has resulted in a new set of problems:

  • Why must I use framework A? Can I use framework B instead?
  • Why do I need to learn additional template languages or frameworks? Isn’t it possible with just HTML, CSS, and JS?
  • Why must a simple static content web page load client-side JS?

Astro to the Rescue

Astro allows you to break down pages into component islands and encourages you to integrate your favorite UI languages (or use Astro syntax, a combination of HTML and JS that is very easy to learn) as follows:

---
import Navbar from '/components/Navbar.astro';
import Carousel from '/components/Carousel.astro';
import Article from '/components/Article.astro';
---


<html>
  <body>
    <header>
      <Navbar />
    </header>
    <main>
      <article></article>
      <Carousel />
    </main>
  </body>
</html>

To achieve “shipping as little JavaScript as possible to the client,” Astro by default pre-renders all components on the server and only loads the relevant JavaScript when that component is needed on the page, a behavior known as Hydration. In Astro, we can simply use the “Template Directives Reference🔗” to control the hydration timing of components with options like: client:visible, client:media, etc.

Selective hydration 

<!-- The navbar toggle component only loads when the device size is below 500px -->
<NavbarToggle client:media="(max-width: 500px)" />


<!-- The carousel component only loads when it appears in the user's screen view -->
<Carousel client:visible />

This is Astro’s chosen rendering solution for “content-centric web pages”: “Selective Hydration,” which is a practical implementation of the “Astro Island” architecture. This rendering method is just right for static-type web pages as it ensures both web speed and SEO effectiveness while efficiently loading JavaScript on the page.

Selective hydration flowchart

Conclusion

Today we understood the difference between dynamic websites and static websites (frozen pizza versus freshly baked pizza) and also gained insight into the various needs of modern web pages, with some leaning towards static and others towards dynamic, influencing the choice of web “rendering modes.” Astro is a framework aiming primarily at generating static pages.

Further Reading