Astro

Files in `public/` are served as-is, while files in `src/` are processed by Vite. Generally, you should keep images in `src/` to benefit from Astro's automatic optimization.

The Astro CLI powers your development workflow. `astro check` is particularly useful as it validates your TypeScript types AND Astro-specific component syntax across your entire project.

Astro components are HTML-only components with no client-side runtime. They allow for component-based development and templating logic that runs entirely at build or request time on the server.

Integrations are Astro's plugin system. They allow you to add new features (like Tailwind, Sitemap, or React) with a single command: `npx astro add `.

To use SSR features, you must install an adapter (e.g., for Vercel, Netlify, or Node.js). Adapters tell Astro how to package your application for the target environment's runtime.

Astro's built-in Image component automatically optimizes images by resizing them and converting them to modern formats like WebP, while also preventing layout shifts via intrinsic sizing.

Props are accessed via `Astro.props` in the component script. You can use TypeScript's `Props` interface to provide type safety and editor autocomplete for your component's API.

Inside a `<style>` tag in an Astro component, CSS is scoped to that component by default. Astro adds a unique hash to the class names at build time, preventing style leaks across the application.

Astro uses ` ` as a placeholder for external content. It also supports named slots for multi-point content injection and fallback content if no content is provided.

Astro is a modern web framework designed for content-focused websites. It prioritizes performance by using an "islands architecture" and shipping zero JavaScript to the client by default.

Astro uses a "code fence" (---) to define a component's frontmatter. This is where you write TypeScript or JavaScript that runs only on the server to fetch data, define props, and import other components.

Astro renders components to static HTML on the server during build time. Unless you explicitly add a client directive, no JavaScript is sent to the browser, leading to extremely fast page loads.

Astro allows you to create API endpoints by adding `.js` or `.ts` files to the `src/pages` directory. These can serve JSON, images, or any other data type and work in both SSG and SSR modes.

Client directives control how and when a UI framework component is hydrated on the client. Common values include `client:load`, `client:idle`, `client:visible`, and `client:only`.

Content Collections are Astro's best-in-class tool for managing markdown and data files. They provide automatic TypeScript type safety for your frontmatter and help organize your content into logical groups.

In static mode, dynamic routes require a `getStaticPaths()` function to specify which paths should be generated at build time. This allows you to create hundreds of pages from a single template.

Hybrid rendering allows you to mix static and on-demand rendering on a per-page basis. You can set the entire site to static and opt-in to SSR for specific pages using `export const prerender = false`.

Astro has first-class support for MDX, allowing you to use JSX components (React, Vue, etc.) directly inside your Markdown files. This is perfect for interactive documentation or tutorials.

Astro allows you to prefetch pages when a user hovers over a link or when a link enters the viewport. This makes the next navigation feel instantaneous by loading the data in advance.

Astro supports Static Site Generation (SSG), Server Side Rendering (SSR), and Hybrid rendering. It recently introduced Server Islands which function similarly to ISR by deferring component rendering.

Hydration is the process where a client-side library (like React) attaches to server-rendered HTML. Astro allows for partial hydration, where only selected components are hydrated, reducing JS execution time.

Astro includes a built-in router that uses the browser's View Transitions API to provide seamless, app-like navigation between pages without a full page refresh.

Islands architecture (pioneered by Astro) identifies small, interactive UI components on a page as "islands" that are hydrated independently. The rest of the page remains static HTML.

The `Astro` global object is available in all components. It provides access to request info, cookies, redirects, and specialized helper properties like `Astro.props` and `Astro.slots`.

Astro Actions provide a type-safe way to handle form submissions and server-side logic from the client, acting as a replacement for traditional API endpoints with better DX and type safety.

Astro DB is a fully managed SQL database designed specifically for Astro. It provides a type-safe ORM and integrates seamlessly with content collections and the rest of the Astro ecosystem.

Middleware allows you to intercept requests and responses, enabling features like authentication, logging, session management, and dynamic header modification before a page is rendered.

Rest parameters (e.g., `[...slug].astro`) allow for catch-all routing. They are particularly useful for deeply nested documentation or content structures where the number of segments is unknown.

Server Islands allow you to defer the rendering of dynamic parts of a page, keeping the rest of the page static. This combines the benefits of SSG caching with the flexibility of SSR personalization.

The Content Layer (introduced in Astro 5.0) allows you to fetch content from any source (CMS, JSON, APIs) and treat it exactly like local Markdown files, with full type safety via Zod schemas.