What are Astro's built-in components?
Answer
Astro provides several built-in components for common tasks: <Image />: optimized images with automatic WebP/AVIF conversion, resizing, and lazy loading. <Image src={heroImg} width={800} alt="Hero" />. <Picture />: responsive images with multiple sources. <Code />: syntax highlighted code blocks (Shiki-powered). <Debug />: prints variables during development: <Debug {data} />. <ViewTransitions />: enables page transition animations. From astro:transitions: <ClientRouter /> (alias for ViewTransitions in Astro 4.x). From astro:content: content collection APIs. Astro's Image optimization is one of its most powerful features — local images are processed at build time with Sharp; remote images are validated and proxied. The <Image /> component automatically adds width, height, and loading="lazy" attributes to prevent Cumulative Layout Shift (CLS).
Previous
What is Remix's defer and Suspense streaming?
Next
How does Remix handle optimistic UI updates?