Astro.js

...and JAMStack done right

What's this about

The old web and the new
Web pages vs. web apps
SSG, SPA vs MPA, SSR and Astro.js

The history lesson

"Modern" web apps and SPAs became a thing circa IPhone 4, when we decided Flash was a bad idea.

This guys' to blame :D

before that

Web apps were backend heavy
CMS' were more present in the web dev mindshare
Everything was server-side rendered (SSR)

what we learned from mobile

Interactivity, animations, transitions
Flash wasn't going to cut it
...and in our infinite wisdom, we went full opposite.

Single page applications

They gave us interactivity
They seem faster
They allowed for stuff that was impossible before
...all for the low price of XX megabytes of JS bundle size.

API / SAAS driven
CSR
Fully interactive
Huge bundle sizes

web apps

CMS driven
SSR
Partially interactive*
Lighter on JS*

web sites

The two webs

Enter Astro.js
A static-site generator that also does SSR
Aims for zero JS
Component based
"Islands" architecture
Works really well with headless CMS

Astro components

Basically, just HTML with some tricks
Server-side rendered
Can contain server-side logic (node)
...I just described PHP (but in node), pretty much 😅

Astro components

// Title.astro
<div>
	<h1>I'm an Astro component</h1>
</div>

Astro components

---
import Title from './Title.astro';
---
<main>
  <Title />
</main>

Astro components

---
import Title from './Title.astro';
---
<main>
  <Title />
</main>

Astro components

---
// Title.astro

const title = "I'm an Astro component";
---
<div>
	<h1>{title}</h1>
</div>

Astro components

---
import Title from './Title.astro';
---
<main>
  <Title />
</main>

Astro components

---
// Title.astro

const props = Astro.props;
---
<div>
	<h1>{props.title}</h1>
</div>

Astro components

---
import Title from './Title.astro';
---
<main>
  <Title title="I'm an Astro component" />
</main>

islands

---
// Example: Use a static React component on the page, without JavaScript.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100% HTML, Zero JavaScript loaded on the page! -->
<MyReactComponent />
  
  
<!-- This component is now interactive on the page! 
     The rest of your website remains static and zero JS. -->
<MyReactComponent client:load />

More about directives at: https://docs.astro.build/en/reference/directives-reference/#client-directives