Astro 4 Has a Free API That Makes Content-Driven Websites Blazing Fast

#astro #performance #javascript #webdev

Astro is the web framework for content-driven websites. It ships zero JavaScript by default and supports React, Vue, Svelte, and Solid components — all in one project.

Islands Architecture: Selective Hydration

---
import Header from "../components/Header.astro";
import ProductCard from "../components/ProductCard.tsx";
import SearchBar from "../components/SearchBar.vue";
---

<Header />
<SearchBar client:load />
<ProductCard client:visible product={product} />

client:load — hydrate immediately. client:visible — hydrate when scrolled into view. client:idle — hydrate when browser is idle.

Content Collections API

import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

---
import { getCollection } from "astro:content";
const posts = await getCollection("blog", ({ data }) => !data.draft);
---
{posts.map(post => <article><h2>{post.data.title}</h2></article>)}

Server Endpoints

import type { APIRoute } from "astro";

export const GET: APIRoute = async ({ url }) => {
  const category = url.searchParams.get("category");
  const products = await db.query("SELECT * FROM products WHERE category = $1", [category]);
  return new Response(JSON.stringify(products));
};

View Transitions

---
import { ViewTransitions } from "astro:transitions";
---
<head><ViewTransitions /></head>
<img transition:name={`product-${id}`} src={img} />

Image Optimization

---
import { Image } from "astro:assets";
import hero from "../assets/hero.png";
---
<Image src={hero} alt="Hero" width={800} format="avif" />

Build content sites with scraped data? My Apify tools generate content for Astro sites.

Custom content pipeline? Email spinov001@gmail.com

DEV Community