Astro Next

0.21.0

Astro Next

(aka our new compiler + runtime)

Astro in 2 minutes

Static site generator ⚡️

Static site generator ⚡️

  • Markdown pages
  • File-based routing
  • Component-based

Features You Expect

Our Unique Take

  • Components from any framework
  • 0kB of JavaScript by default
  • 🏝 Islands architecture

Astro Components

---
const { user } = Astro.props;  
---
  
<article class="user">
  <h1>{ name }</h1>
  <p>Stuff about the user here...</p>
</article>

User.astro

Component script section

Template section

Astro Components

---
import User from '../components/User.jsx'; 
---
  
<html lang="en">
  <head>
    <title>User page</title>
  </head>
  <body>
    <h1>Users</h1>

    <User name="Matthew" />
  </body>
</html>

index.astro

import React from 'react';

export default function({ name }) {
  return (
    <article class="user">
      <h1>{ name }</h1>
      <p>Stuff about the user here...</p>
    </article>
  );
}

User.jsx

Astro Components

<html lang="en">
  <head>
    <title>User page</title>
  </head>
  <body>
    <h1>Users</h1>

    <article class="user">
      <h1>Matthew</h1>
      <p>Stuff about the user here...</p>
    </article>
  </body>
</html>

index.html

Produces 0kB JS

Astro Components

---
import User from '../components/User.jsx'; 
---
  
<html lang="en">
  <head>
    <title>User page</title>
  </head>
  <body>
    <h1>Users</h1>

    <User client:load name="Matthew" />
  </body>
</html>

index.astro

Load on page load

Astro Components

---
import User from '../components/User.jsx'; 
---
  
<html lang="en">
  <head>
    <title>User page</title>
  </head>
  <body>
    <h1>Users</h1>

    <User client:idle name="Matthew" />
  </body>
</html>

index.astro

Load on CPU idle

Astro Components

---
import User from '../components/User.jsx'; 
---
  
<html lang="en">
  <head>
    <title>User page</title>
  </head>
  <body>
    <h1>Users</h1>

    <User client:visible name="Matthew" />
  </body>
</html>

index.astro

Load when scrolled into view

Astro Components

---
import User from '../components/User.jsx'; 
---
  
<html lang="en">
  <head>
    <title>User page</title>
  </head>
  <body>
    <h1>Users</h1>

    <User client:media="(max-width: 600px)" name="Matthew" />
  </body>
</html>

index.astro

Load on matching media query

Astro Next

New Compiler

⚡️ WASM-powered

Missing features

  • Source maps
  • Doubling-down on HTML
    • Whitespace is now rendered

Performance

  • X percent faster (get numbers)

REPL

https://astro.build/play

define:vars

example here

---
let color = 'blue';
---

<style define:vars={{ color }}>
  .user {
    color: var(--color);
  }
</style>

Components in markdown

Setting up the future

  • Server-side rendering
    • Can run in Node, Deno, Cloudflare Workers.
  • Streaming responses

New Runtime

Vite 

Why switch to Vite?

  • Great core team
  • The ecosystem
  • Used by other frameworks
    • SvelteKit
    • NuxtJS
  • Features not available in Astro today

New stuff

  • Faster dev startup time (need numbers)
  • Automatic filename hashing (show example)
  • Friendlier error messages
  • Source maps everywhere

npm packages in scripts

<time id="today"></time>

<script>
  import {format} from 'date-fns'; 
  
  const nowFormatted = format(new Date(), 'MMMM dd, yyyy -- H:mm:ss.SSS');
  document.querySelector('#time').textContent = nowFormatted;
</script>

Astro Next Next

aka 1.0

Where are we at?

We are really close! But a few more things...

Finalizing longstanding discussions

  • Build performance
  • Security (XSS, etc)
  • Prettier support!