Astro - Developing faster sites

What is Astro?

Astro is a Javascript web framework for creating fast, highly static, content-focused websites like marketing, publishing and portfolios sites, blogs and a few e-commerces.

Astro is a multi-page application (MPA) framework, unlike frameworks like React and Vue which are single-page application (SPA) frameworks

Single Page Applications vs Multi Page Applications

What are the differences between Single Page Application and Multi Page Application frameworks?

	Single Page Application	Multi Page Application
How it works	When user first navigate to a page , the entire application executable code is downloaded Only a single page is rendered on the client. Ajax calls can be made to get dynamic data after page is rendered	When user navigate to a page only that pages HTML is downloaded Pages are rendered on the server API calls are made from the server
Performance	Slower first page load. Subsequent page navigation tend to be faster (no reload).	Offer much faster first page load time. Subsequent page navigation can be slower since there is no local rendering
SEO	Great	Non-SEO friendly
UX	Allows a seamless user experience	Bad UX for Highly interactive webapps / long lived sessions

Page rendering strategies

There are multiple page rendering strategies, but the most popular ones are, client side Rendering, server side rendering and static site generation

Client Side Rendering (CSR)

• A single page is rendered on the browser after the application code is downloaded
• Application data can be fetched through ajax calls
• Can be challenging to implement great SEO
• Slower page loads (TTI) than SSR
• Great for implementing complex interactivity

Server Side Rendering (SSR)

• HTML pages are pre-rendered on the server at request time
• Static pages can become interactive after render through a process called hydration
• Great for SEO
• Faster page loads (Time To Interactive) than CSR
• Usually more expensive - demand more server resources

Static Site Generation (SSG)

• Pages are pre-rendered on the server at build time
• Great for SEO
• Fastest page load speed - download the pre-rendered html page per request
• Great for pages that almost never changes (Ex.: About Us, Contact US, Blog posts, etc)

Core features

• Multi Page Application
• Uses Static Site Generation by default
• Ships zero Javascript by default
• Supports Server Side Rendering
• Islands of interactivity
• Partial hydration - Adds client side JS after HTML is rendered on the server
• Supports client side rendering (for individual components)
• Bring your own UI framework -> allows developers to write code in almost all modern frameworks: React, Vue, Preact, Svelte, Solid, Lit and Alpine.js

Islands of Interactivity

• The term “Astro Island” refers to an interactive UI component on an otherwise static page or “sea” of HTML
• Each interactive component is treated as if it was one application
• It is possible to develop each island using a different framework
• Interactivity can be added to components via a technique called partial hydration through different implementations:
  • client:load - immediately load and hydrate on page load
  • client:only=“{framework}” - the same as client:load but loads in the client (skips SSR)
  • client:idle - load and hydrate whenever browser has nothing else to do
  • client:visible - load and hydrate is viewed by the user
  • client:media={css} - load and hydrate when media query is valid

Component Structure

---
// Your component script here!
import Banner from '../components/Banner.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- HTML comments supported! -->
{/* JS comment syntax is also valid! */}

<Banner />
<h1>Hello, world!</h1>

<!-- Use props and other variables from the component script: -->
<p>{title}</p>

<!-- Include other UI framework components with a `client:` directive to hydrate: -->
<ReactPokemonComponent client:visible />

<!-- Mix HTML with JavaScript expressions, similar to JSX: -->
<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>

<!-- Use a template directive to build class names from multiple strings or even objects! -->
<p class:list={["add", "dynamic", {classNames: true}]} />