Building faster websites with Astro
A Friday Talk by Ryan Trimble
What is Astro?
Astro is an all-in-one web framework for building fast, content-focused websites.
Building faster websites with Astro
A Friday Talk by Ryan Trimble
What is Astro?
Astro is an all-in-one web framework for building fast, content-focused websites.
Sigh… Another JavaScript framework?
Yes
Yes (sort of)
Why Astro?
- Content-focused: Astro was designed for content-rich websites.
- Server-first: Websites run faster when they render HTML on the server.
- Fast by default: It should be impossible to build a slow website in Astro.
- Easy to use: You don’t need to be an expert to build something with Astro.
- Fully-featured, but flexible: Over 100+ Astro integrations to choose from.
Key Features
- Component Islands: A new web architecture for building faster websites.
- Server-first API design: Move expensive hydration off of your users’ devices.
- Zero JS, by default: No JavaScript runtime overhead to slow you down.
- Edge-ready: Deploy anywhere, even a global edge runtime like Netlify, Deno, or Cloudflare.
- Customizable: Tailwind, MDX, and 100+ other integrations to choose from.
- UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more.
Component Islands
Component Islands
Pioneered by Astro.
Islands refer to an interactive UI component on an otherwise static page of HTML. Multiple islands can exist on a page, and an island always renders in isolation.
Astro generates every website with zero client-side JavaScript, by default. Use components from frameworks such as Vue or React and Astro will automatically render to HTML ahead of time and strip out all JavaScript.
Component Islands
Pioneered by Astro.
JavaScript hydration occurs per component.
// Load on page load <MyComponent client:load /> // Load once the rest of page is done loading <MyComponent client:idle /> // Load once component is visible in user's viewport <MyComponent client:visible /> // Load whenever specific media query is met <MyComponent client:media={QUERY} /> // Skip HTML rendering and client loads JavaScript <MyComponent client:only={FRAMEWORK} />// Load on page load <MyComponent client:load /> // Load once the rest of page is done loading <MyComponent client:idle /> // Load once component is visible in user's viewport <MyComponent client:visible /> // Load whenever specific media query is met <MyComponent client:media={QUERY} /> // Skip HTML rendering and client loads JavaScript <MyComponent client:only={FRAMEWORK} />
Components
Astro Components
Astro includes it’s own type of components using the .astro file extension.
JavaScript inside Astro components cannot be hydrated.
--- const fruits = [ 'apple', 'banana', 'strawberry', 'pineapple'] --- <h1>Fruits</h1> <ul> { fruits.map(fruit => <li>{fruit}</li>) } </ul> <style> h1 { color: steelblue; } ul { padding: 0; } </style>--- const fruits = [ 'apple', 'banana', 'strawberry', 'pineapple'] --- <h1>Fruits</h1> <ul> { fruits.map(fruit => <li>{fruit}</li>) } </ul> <style> h1 { color: steelblue; } ul { padding: 0; } </style>
Frameworks
Astro also supports components from other frameworks:
- React
- Vue
- Svelte
- Preact
- SolidJS
- Lit
- Alpine
- Angular
Adding Frameworks
Using Astro integrations, frameworks can be easily added.
command line
npx astro add vuenpx astro add vue
astro.config.js
import vue from '@astrojs/vue'; export default { // ... integrations: [vue()] }import vue from '@astrojs/vue'; export default { // ... integrations: [vue()] }
Integrations
Integrations
Launching projects at warp speed
Astro has numerous integrations available that can be easily added to your project.
- Automatically generating sitemaps on build
- Adding important SEO tags to pages
- Loading and transforming images
- Translating websites into different languages
- Deploying sites to places like Netlify, Cloudflare, and Vercel
Server-Side Rendering
Server-Side Rendering
Zero JS by default.
- Move expensive hydration off of user’s devices
- No JavaScript runtime overhead
- Deploys anywhere, such as Netlify, Deno, Cloudflare, etc…