Adam L Barrett PRO
Adam L Barrett is a JavaScript and Front-End consultant, a contributor to open source, and avid bike-shedder.
Astro and the Island Architecture
- TLDR
- What is Astro
- What is the Island Architecture
- The confusing state of the modern web
- Where the Islands Architecture fits in
- How Astro Helps
Agenda
What is Astro?
Astro
Astro is a new kind of static site builder for the modern web
Killer Feature
Best Feature
What is the Islands Architecture?
- Jason Miller
“...All of the other content is secondary to this information, and its inclusion in the HTML becomes a product decision. How vital is this bit of information to a user visiting the page? How important is that widget to the business model? A "buy now" button that directly relates to revenue should be easily prioritized over a site feedback survey button that relates to information gathering.”
The current messy state of rendering HTML on the web
Unpopular Opinion
SSR is overused
Client Side
Rendering
Server Side
Rendering
SSR vs SPA?
"What the hell is that?"
"Better"
So SSR vs SPA becomes...
- Are we doing work on request or ahead of time
- where do we do the work
- do we have to access a database
- do we care about SEO?
- How often do we update which files?
- etc...
Where the
Islands Architecture fits in
How Astro
can help
The Astro Component files
...and file based routing
index.astro
---
import {format} from 'date-fns';
const builtAt: Date = new Date();
const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
---
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Astro Playground</title>
<style>
header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 15vh;
font-family: Arial;
}
</style>
</head>
<body>
<header>
<img width="60" height="80" src="https://bestofjs.org/logos/astro.svg" alt="Astro logo">
<h1>Hello, Astro!</h1>
</header>
</body>
</html>
MyComponent.astro
---
import { Markdown } from 'astro/components';
---
<Markdown>
# Markdown syntax is now supported! **Yay!**
</Markdown>Movies.astro
---
import { MovieList } from ':components/MovieList.jsx'
const response = await fetch('https://example.com/movies.json');
const data = await response.json();
---
<!-- Output the result to the page -->
<MovieList movies={data} />
Opt-In to interactivity
...and use any framework
Movies.astro
---
import { MovieList } from ':components/MovieList.jsx'
const response = await fetch('https://example.com/movies.json');
const data = await response.json();
---
<!-- Output the result to the page -->
<MovieList movies={data} />Movies.astro
---
import { MovieList } from ':components/MovieList.jsx'
const response = await fetch('https://example.com/movies.json');
const data = await response.json();
---
<!-- Output the result to the page -->
<MovieList client:load movies={data} />client:*
<MyComponent client:load />
Start importing the component JS at page load. Hydrate the component when import completes
<MyComponent client:idle />
Start importing the component JS as soon as main thread is free. Hydrate the component when import completes.
<MyComponent client:visible />
Start importing the component JS as soon as the element enters the viewport. Hydrate the component when import completes. Useful for content lower down on the page
<MyComponent client:media={QUERY} />
Start importing the component JS as soon as the browser matches the given media query. Hydrate the component when import completes
<MyComponent client:only />
Start importing the component JS at page load and hydrate when the import completes, similar to client:load. The component will be skipped at build time
Other Cool Features
...Markdown, Code Blocks, RSS and more
Astro and the Island Architecture
Astro and the Islands Architecture
By Adam L Barrett
Astro and the Islands Architecture
Astro is the hot new static site builder for creating user-centric websites with “islands” of interactivity ...and the coolest part: You can even use React, Vue or Svelte components to build your site, or a combination of them, it doesn’t matter, it’s whatever you prefer. So come learn about the Islands Architecture, the features of Astro and how you can build full featured interactive websites
