Astro Actions

Astro Actions provide a type-safe way to handle backend logic like form submissions, database mutations, or sending emails without manually creating API endpoints.

Key Features

• Type Safety: Automatic end-to-end typing using Zod.
• Progressive Enhancement: Works with standard HTML forms even if JavaScript fails to load.
• JSON Support: Can be called as standard functions from client-side scripts.

Astro Adapters

By default, Astro builds a static site. To use Server-Side Rendering (SSR) or Hybrid rendering, you must install an Adapter that matches your deployment platform (e.g., Vercel, Netlify, Cloudflare, Node.js).

Responsibilities

• Request/Response Mapping: Translating platform-specific request objects to standard Web APIs.
• Server Entry Point: Generating the code necessary to run the Astro engine on the target server/edge.
• Feature Support: Enabling platform-specific features like Middleware or Image Optimization.

Astro Components

Astro components (.astro files) are HTML-only components with no client-side runtime by default. They consist of two main parts:

The Component Script (Frontmatter)

Written in TypeScript/JavaScript between --- fences. This code runs only on the server (or at build time) and never reaches the browser. It’s used for fetching data, importing other components, and processing logic.

The Component Template

Written below the second --- fence. It defines the HTML structure. It supports:

• JSX-like Expressions: {variable}
• Slots: <slot /> for passing children.
• Scoped CSS: <style> tags are scoped to the component by default.

Content Collections

Content Collections are the best way to work with Markdown, MDX, and YAML in Astro. They provide:

• Schema Validation: Using Zod to ensure content matches expected structures.
• Type Safety: Automatic TypeScript definitions generated for your content.
• Performance: Optimized querying and loading of local files.

Astro Dynamic Routing

Astro supports dynamic path segments using brackets (e.g., [id].astro or [...path].astro).

Key Functions

• getStaticPaths(): In SSG mode, this function is required to tell Astro which routes to pre-render at build time.
• Astro.params: How you access the dynamic segments in the component script.
• Astro.props: Passing data from getStaticPaths directly to the page to avoid re-fetching.

---

Environment Variables & Security

Astro uses Vite’s environment variable handling but adds its own layer of security to prevent accidental leaks.

Variable Types

• Private Variables: Defined in .env without a prefix. These are only available in the Astro frontmatter and API routes (server-side).
• Public Variables: Prefixed with PUBLIC_ (e.g., PUBLIC_ANALYTICS_ID). These are accessible on both the server and the client.

Data Validation

Astro supports a cvs (config validation schema) for environment variables using the astro:env module (Astro 4.x+), allowing you to define types and default values for your variables.

The Astro Global Object

The Astro global is available in the frontmatter of all .astro files. It provides context about the current request and the component itself.

Key Properties

• Astro.props: Access data passed to the component.
• Astro.url: Information about the current URL (path, search params).
• Astro.cookies: Get and set cookies (in SSR mode).
• Astro.request: Access the standard Web Request object (headers, method).
• Astro.redirect(): Programmatically redirect to another page.

---

Astro Integration API

Integrations are hooks into the Astro build lifecycle. They allow you to add support for UI frameworks (React, Svelte), CSS tools (Tailwind), or custom build steps.

Lifecycle Hooks

• astro:config:setup: Add new integrations, update config, or inject scripts.
• astro:server:setup: Hook into the Vite dev server.
• astro:build:done: Run logic after the production build finishes.

Island Architecture

Island Architecture is a pattern where the server renders the entire page to static HTML, and “islands” of interactivity (framework components like React, Vue, or Svelte) are hydrated independently.

Key Benefits

• Zero JS by Default: The majority of the page remains static HTML, reducing the payload.
• Independent Hydration: Components load and become interactive without waiting for the rest of the page.
• Partial Hydration: You only ship JavaScript for the parts of the page that actually need it.

Markdown & MDX Extensibility

Astro provides a powerful pipeline for content. Beyond basic Markdown, you can extend functionality using two types of plugins:

Remark & Rehype

• Remark: Plugins that transform the Markdown AST (e.g., adding a table of contents).
• Rehype: Plugins that transform the HTML AST (e.g., adding IDs to headings or lazy-loading images).

MDX

MDX allows you to use Astro components (or framework islands) directly inside your Markdown files, enabling rich interactive content.

Astro Middleware

Middleware allows you to intercept requests and responses and inject logic dynamically before a page or endpoint is rendered.

Key Use Cases

• Authentication: Checking for session cookies or JWTs.
• Redirects: Handling legacy URLs or A/B testing.
• Header Manipulation: Adding security headers or custom response headers.
• Logging: Capturing performance metrics or request logs.

Astro Rendering Modes

Astro supports multiple ways to deliver your content:

• Static (SSG): Default mode. The entire site is built as static HTML at build time.
• Server-Side Rendering (SSR): Pages are generated on-demand by a server or edge function.
• Hybrid Rendering: A mix where most pages are static, but specific routes are rendered on the server.

Client-Side Scripts in Astro

While Astro is “Zero JS by default,” you can add interactivity using standard <script> tags in your .astro components.

Script Behavior

• Bundled: By default, Astro processes, bundles, and minifies scripts.
• Processed Once: Even if a component is used multiple times, its script is included in the bundle only once.
• Directives:
  • is:inline: Skips bundling; the script is included exactly as-is in the HTML.
  • define:vars: Passes server-side variables from the frontmatter to the client-side script.

Testing & The Container API

Testing .astro components has historically been difficult because they only run in the Astro environment.

The Container API

Astro provides a Container API that allows you to render .astro components in isolation for unit testing. You can pass props and slots and inspect the resulting HTML.

Integration Testing

For end-to-end testing, tools like Playwright or Cypress are recommended, as they test the final output of the build or the dev server.

View Transitions

Astro provides a built-in router that leverages the browser’s View Transitions API to create smooth, app-like transitions between pages in a Multi-Page Application (MPA).

Benefits

• Animations: Cross-fade or slide animations between pages.
• Persistent Elements: Keep specific elements (like a video player or audio track) active during navigation.
• Reduced Friction: Makes an MPA feel as fluid as a Single-Page Application (SPA).