
Astro 4 Has a Free API That Makes Content-Driven Websites Blazing Fast
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
Continue reading on Dev.to Webdev
Opens in a new tab



