Skip to main content

Menu

LEVEL 0
0/5 XP
HomeAboutTopicsPricingMy VaultStats

Categories

🤖 Artificial Intelligence
☁️ Cloud and Infrastructure
💾 Data and Databases
💼 Professional Skills
🎯 Programming and Development
🔒 Security and Networking
📚 Specialized Topics
HomeAboutTopicsPricingMy VaultStats
LEVEL 0
0/5 XP
GitHub
© 2026 CheatGrid™. All rights reserved.
Privacy PolicyTerms of UseAboutContact

Astro Web Framework Cheat Sheet

Astro Web Framework Cheat Sheet

Back to Web Development
Updated 2026-05-17
Next Topic: Bootstrap CSS Framework Cheat Sheet

Astro is a modern web framework designed for building content-driven websites that ship minimal JavaScript by default. Born from the insight that most web content is static, Astro renders HTML on the server and selectively hydrates only the interactive components that need it—an architectural pattern called Islands Architecture. Unlike traditional JavaScript frameworks that send everything to the client, Astro ships zero JavaScript unless you explicitly opt in, making it exceptionally fast for blogs, marketing sites, documentation, and e-commerce platforms. The framework's key differentiator is its multi-framework flexibility: you can mix React, Vue, Svelte, and Solid components in the same project, hydrating each island independently with precise control over when and how interactivity loads.

What This Cheat Sheet Covers

This topic spans 22 focused tables and 95 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core Rendering ModesTable 2: Island Architecture Hydration DirectivesTable 3: Framework IntegrationsTable 4: Content CollectionsTable 5: Routing and Dynamic RoutesTable 6: Layouts and SlotsTable 7: Markdown and MDXTable 8: Data Fetching and External APIsTable 9: Styling and CSSTable 10: Environment Variables and ConfigurationTable 11: Deployment AdaptersTable 12: Image OptimizationTable 13: View TransitionsTable 14: Astro ActionsTable 15: MiddlewareTable 16: TypeScript Configuration and Props ValidationTable 17: CLI CommandsTable 18: Server Islands and Progressive EnhancementTable 19: Security and HeadersTable 20: Testing StrategiesTable 21: Internationalization (i18n)Table 22: Performance Optimization

Table 1: Core Rendering Modes

Astro adapts to your needs with three rendering strategies, each optimizing for different performance and deployment scenarios. Static Site Generation (SSG) pre-renders all pages at build time, delivering the fastest possible load times at the cost of rebuild overhead for content updates. Server-Side Rendering (SSR) generates HTML per request, enabling dynamic personalization and real-time data at the cost of server compute. Hybrid mode blends both approaches in a single project, letting you pre-render marketing pages while keeping user dashboards server-rendered. The key insight: Astro doesn't force an all-or-nothing choice—you control rendering per route.

ModeExampleDescription
Static (SSG)
output: 'static'
• Pre-renders all HTML at build time
• default mode—pages are served as static files from a CDN with no server runtime required
Server (SSR)
output: 'server'
• Renders pages on-demand per request using a server runtime
• requires an adapter (Vercel, Netlify, Node, etc.) for deployment

More in Web Development

  • AngularJS Cheat Sheet
  • Bootstrap CSS Framework Cheat Sheet
  • Browser Compatibility Cheat Sheet
  • Frontend State Management Beyond Redux Cheat Sheet
  • React Frontend Framework Cheat Sheet
  • SvelteKit Meta-Framework Cheat Sheet
View all 43 topics in Web Development