Skip to content
latest-astro logo

Latest Astro Knowledge (2024-2025)

latest-astro

Latest Astro features from versions 4.x through 5.x (mid 2024 to 2025)

SKILL.md

Full skill instructions

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


Version Timeline (2024-2025)

Astro 5.0 (December 3, 2024) - Major Release

  • Announcement
  • 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
  • Experimental sessions feature
  • Improved image caching

Astro 5.2 (January 30, 2025)

  • Announcement
  • Tailwind 4 support - New Vite-based integration
  • Config value access in pages
  • Better trailing slash handling

Astro 5.3 (February 13, 2025)

  • Announcement
  • 1.5-2x faster SSR response times
  • Automatic session storage setup
  • Netlify bundling controls

Astro 5.4 (February 25, 2025)

  • Announcement
  • Remote image optimization in Markdown
  • Enhanced dev/​preview server security

Astro 5.5 (March 13, 2025)

  • Announcement
  • Type-safe sessions
  • Better Markdown compatibility

Astro 5.15 (October 3, 2025)

  • Announcement
  • Netlify skew protection - Zero-config deployment IDs
  • Granular font preload filtering
  • New adapter APIs for fetch headers

Astro 5.16 (November 20, 2025)

  • Announcement
  • Experimental SVG optimization
  • Enhanced interactive CLI

Astro 6.0 Alpha (December 2025)

  • Docs
  • 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

Resources:

Server Islands (Experimental - Astro 4.12+)

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

Resources:

Actions API (Astro 4.8+)

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

Resources:

React Server Components (2025)

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

Resources:


Client Directives (Islands Architecture)

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

DirectiveBehavior
client:loadHydrate immediately on page load
client:idleHydrate when browser is idle
client:visibleHydrate when scrolled into view
client:media={...}Hydrate based on media query
client:onlyServer-side rendering disabled

Resources:


Database Integration

Official Database Solutions

  1. Astro DB - Fully-managed SQL database

  2. Prisma - Type-safe ORM

  3. Drizzle ORM - Lightweight TypeScript ORM


Internationalization (i18n)

Resources:

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:


SSR & Adapters

Performance:

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

Resources:


Middleware

Resources:

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:


Styling

Tailwind CSS v4 (Astro 5.2+)

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

Resources:


View Transitions

Resources:

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% faster than competitors
  • Zero JS baseline with targeted hydration (~5 KB vs 200+ KB)

Best Practices

  1. Use Content Layer for structured content management
  2. Leverage Server Islands for hybrid static/​dynamic content
  3. Choose appropriate client directives for optimal hydration
  4. Use Actions API for type-safe form handling
  5. Enable View Transitions for smoother navigation
  6. Utilize Astro DB or Prisma/​Drizzle for database needs

Experimental Features

  • Server Islands - Hybrid rendering
  • SVG Optimization - Build-time SVGO (5.16)
  • Sessions - Type-safe session storage (5.1+)
  • React Server Components - Active development

Migration Notes

Upgrading to Astro 5

Upgrading to Astro 6 (Alpha)


Sources

More skills from majiayu000

xiaohongshu logo
majiayu000/claude-arsenal

xiaohongshu

xiaohongshu

286 148
View
agent-task-conductor logo
majiayu000/claude-skill-registry

agent-task-conductor

Conduct multi-agent task orchestration and workflow coordination.

663 1
View
conductor-setup logo
majiayu000/claude-skill-registry

conductor-setup

Initialize project with Conductor artifacts (product definition,

663 1
View
animation-designer logo
majiayu000/claude-skill-registry

animation-designer

Expert in web animations, transitions, and motion design using Framer Motion and CSS

663 1
View
diagramming logo
majiayu000/claude-skill-registry

diagramming

Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...

663 1
View
h3-pg logo
majiayu000/claude-skill-registry-data

h3-pg

PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.

23 1
View
conductor-development logo
majiayu000/claude-skill-registry

conductor-development

Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...

663 1
View
conductor-status logo
majiayu000/claude-skill-registry

conductor-status

Display project status, active tracks, and next actions

663 1
View
dockerization logo
majiayu000/claude-skill-registry

dockerization

Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.

663 1
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View