latest-astro

What this skill does

# Latest Astro Knowledge (2024-2025)

> Comprehensive knowledge about Astro framework features released from mid-2024 through 2025

## Overview

This skill contains up-to-date knowledge about Astro framework features, API changes, and best practices from versions 4.x through 5.x (2024-2025). Astro has evolved significantly with major releases introducing the Content Layer API, Server Islands, enhanced Actions API, and performance improvements.

## Key Resources

- [Official Astro Blog](https://astro.build/blog/) - Latest release announcements
- [Astro Changelog](https://astro-changelog.netlify.app/) - Complete changelog
- [Upgrade to Astro v5 Guide](https://docs.astro.build/en/guides/upgrade-to/v5/) - Migration docs
- [2024 Year in Review](https://astro.build/blog/year-in-review-2024/)

---

## Version Timeline (2024-2025)

### Astro 5.0 (December 3, 2024) - Major Release

- [Announcement](https://astro.build/blog/astro-5/)
- **Content Layer API** - New content management system
- **Server Islands** (experimental) - Hybrid static/dynamic rendering
- React Server Components support
- Enhanced Image component
- Improved Dev Toolbar

### Astro 5.1 (December 19, 2024)

- [Announcement](https://astro.build/blog/astro-510/)
- Experimental sessions feature
- Improved image caching

### Astro 5.2 (January 30, 2025)

- [Announcement](https://astro.build/blog/astro-520/)
- **Tailwind 4 support** - New Vite-based integration
- Config value access in pages
- Better trailing slash handling

### Astro 5.3 (February 13, 2025)

- [Announcement](https://astro.build/blog/astro-530/)
- **1.5-2x faster SSR** response times
- Automatic session storage setup
- Netlify bundling controls

### Astro 5.4 (February 25, 2025)

- [Announcement](https://astro.build/blog/astro-540/)
- **Remote image optimization in Markdown**
- Enhanced dev/preview server security

### Astro 5.5 (March 13, 2025)

- [Announcement](https://astro.build/blog/astro-550/)
- Type-safe sessions
- Better Markdown compatibility

### Astro 5.15 (October 3, 2025)

- [Announcement](https://astro.build/blog/astro-5150/)
- **Netlify skew protection** - Zero-config deployment IDs
- Granular font preload filtering
- New adapter APIs for fetch headers

### Astro 5.16 (November 20, 2025)

- [Announcement](https://astro.build/blog/astro-5160/)
- **Experimental SVG optimization**
- Enhanced interactive CLI

### Astro 6.0 Alpha (December 2025)

- [Docs](https://v6.docs.astro.build/en/guides/upgrade-to/v6/)
- Breaking changes and feature stabilization

---

## Major Features

### Content Layer API (Astro 5.0+)

The Content Layer is a major evolution in content management, replacing and enhancing Content Collections.

**Key Features:**

- Content schemas with validation
- Frontmatter validation
- Full TypeScript support
- Support for external content sources (CMS, APIs)
- [Deep Dive Guide](https://astro.build/blog/content-layer-deep-dive/)

**Resources:**

- [Content Layer Intro](https://astro.build/blog/future-of-astro-content-layer/)
- [Migration Guide](https://chenhuijing.com/blog/migrating-content-collections-from-astro-4-to-5/)

### Server Islands (Experimental - Astro 4.12+)

Server Islands combine static HTML with dynamic server-generated content for optimal performance.

**Resources:**

- [Astro 4.12 Announcement](https://astro.build/blog/astro-4120/)
- [Server Islands Future Post](https://astro.build/blog/future-of-astro-server-islands/)

### Actions API (Astro 4.8+)

Type-safe backend function calls from the client with built-in validation.

**Resources:**

- [Actions Documentation](https://docs.astro.build/en/reference/modules/astro-actions/)
- [Actions Guide (Chinese)](https://docs.astro.build/zh-cn/guides/actions/)

### React Server Components (2025)

Astro is actively working on RSC support as a simpler alternative to Next.js.

**Resources:**

- [May 2025 Update](https://astro.build/blog/whats-new-may-2025/)
- [Comparison: Next.js vs Astro](https://www.michalskorus.pl/blog/astro-solves-nextjs-problems)

---

## Client Directives (Islands Architecture)

Astro's client directives control when and how JavaScript is hydrated:

| Directive            | Behavior                         |
| -------------------- | -------------------------------- |
| `client:load`        | Hydrate immediately on page load |
| `client:idle`        | Hydrate when browser is idle     |
| `client:visible`     | Hydrate when scrolled into view  |
| `client:media={...}` | Hydrate based on media query     |
| `client:only`        | Server-side rendering disabled   |

**Resources:**

- [Directives Reference](https://docs.astro.build/fr/reference/directives-reference/)
- [Islands Architecture Explained](https://strapi.io/blog/astro-islands-architecture-explained-complete-guide)

---

## Database Integration

### Official Database Solutions

1. **Astro DB** - Fully-managed SQL database

   - [Documentation](https://docs.astro.build/en/guides/astro-db/)
   - [Deep Dive](https://astro.build/blog/astro-db-deep-dive/)

2. **Prisma** - Type-safe ORM

   - [Prisma + Astro Guide](https://www.prisma.io/docs/guides/astro)
   - [Prisma Postgres + Astro](https://docs.astro.build/en/guides/backend/prisma-postgres/)

3. **Drizzle ORM** - Lightweight TypeScript ORM
   - [Drizzle Documentation](https://orm.drizzle.team/)
   - [Better Auth Integration Example](https://bingowith.me/2026/01/09/astro-better-auth-integration/)

---

## Internationalization (i18n)

**Resources:**

- [i18n Routing Guide](https://docs.astro.build/it/guides/internationalization/)
- [i18n API Reference](https://docs.astro.build/en/reference/modules/astro-i18n/)
- [Astro 5 i18n Guide](https://medium.com/@paul.pietzko/internationalization-i18n-in-astro-5-78281827d4b4)

**Features:**

- Configure default language
- Compute relative page URLs
- Accept browser-preferred languages
- Fallback languages per locale

---

## Image Optimization

**New in 2024-2025:**

- Remote image optimization in Markdown (5.4)
- Better caching for images
- SVG optimization (experimental, 5.16)

**Resources:**

- [February 2025 Updates](https://astro.build/blog/whats-new-february-2025/)
- [Markdown Image Optimization](https://wolfgirl.dev/blog/2025-02-12-optimizing-markdown-images-with-astro/)

---

## SSR & Adapters

**Performance:**

- 1.5-2x faster SSR response times (5.3)

**Resources:**

- [Complete SSR Guide](https://eastondev.com/blog/en/posts/dev/20251202-astro-ssr-guide/)
- [On-Demand Rendering](https://docs.astro.build/it/guides/on-demand-rendering/)

---

## Middleware

**Resources:**

- [Middleware API Reference](https://docs.astro.build/en/reference/modules/astro-middleware/)

**New in 2025:**

- Production-ready middleware with dependency injection (September 2025)
- Security improvements to prevent URL encoding bypass (5.15.7)

---

## Framework Integrations

**Supported UI Frameworks:**

- React (including React 19 support in 5.14)
- Vue
- Svelte
- Preact
- Solid
- Lit

**Resources:**

- [React Integration](https://docs.astro.build/ar/guides/integrations-guide/react/)
- [Solid Integration](https://docs.astro.build/ar/guides/integrations-guide/solid-js/)
- [PartyTown Integration](https://docs.astro.build/ar/guides/integrations-guide/partytown/)

---

## Styling

### Tailwind CSS v4 (Astro 5.2+)

Tailwind 4 now uses a Vite plugin instead of `@astrojs/tailwind`:

**Resources:**

- [Tailwind + Astro Setup 2025](https://tailkits.com/blog/astro-tailwind-setup/)

---

## View Transitions

**Resources:**

- [View Transitions Documentation](https://docs.astro.build/en/guides/view-transitions/)

**Features:**

- Animated transitions between views
- Built-in options: fade, slide, none
- Forward/backward navigation animations
- Fully customizable

---

## Development Tools

### CLI Enhancements (2025)

- Enhanced interactive CLI (5.16)
- Vite & integration versions in `astro info` output

---

## Performance

Astro continues to lead in performance:

- Ships **90% less JavaScript** by default
- **40% f