{"dataset":{"id":"00000000-0000-0000-0000-000000000049","slug":"astro-best-practices","name":"Astro best practices","description":"Source-linked guidance on Astro fundamentals: islands architecture, components, pages and routing, content collections, and shipping less JavaScript. Scoped to current Astro; not a general static-site corpus.","visibility":"public","version":1,"documentCount":5,"publisher":"Koskamo editorial","license":"Original summaries; linked sources retain their own terms.","reviewedAt":"2026-10-04T00:00:00.000Z","readOnly":true,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},"total":5,"documents":[{"title":"Why Astro: content-driven and less JavaScript","sourceUrl":"https://docs.astro.build/en/concepts/why-astro/","text":"For content-driven websites like blogs, marketing, or e-commerce, adopt Astro’s server-first architecture to render HTML on the server, moving expensive rendering off visitors’ devices for faster loads and better SEO. Leverage the Islands component-based architecture and support for UI frameworks like React or Vue while maintaining zero JavaScript by default to minimize client-side overhead. Utilize built-in content collections to organize, validate, and ensure TypeScript type-safety for Markdown content. Enhance performance and customization with integrations such as Partytown and MDX, or hundreds of other API hooks. This approach reduces JavaScript complexity compared to other frameworks, ensuring sites load quickly. Astro’s design principles emphasize that it should be impossible to build a slow website, catering to non-expert developers who need resources for success. Scope: Astro. Reviewed October 4, 2026.","id":"astro-best-practices:Why Astro: content-driven and less JavaScript","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Content collections","sourceUrl":"https://docs.astro.build/en/guides/content-collections/","text":"Use content collections to manage structured content like blog posts or recipes, enabling organization, querying, and editor Intellisense with automatic TypeScript type-safety. Define collections by storing related, structurally identical entries in one or several files locally, or fetching them from remote sources such as databases or CMSs. Each data member is an entry, and collections require a loader to retrieve content and metadata via content-focused APIs. Optionally, define a collection schema to specify the expected shape of entries for type safety, autocomplete, and validation. Choose build-time collections for static data requiring prerendering, caching, or MDX processing, which saves data to a storage layer for excellent performance. Use live collections for frequently updated data fetched at runtime from APIs or CMSs, accepting potential performance costs due to lack of persistence. Both types support community-built or custom loaders for external sources. Scope: Astro. Reviewed October 4, 2026.","id":"astro-best-practices:Content collections","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Pages and file-based routing","sourceUrl":"https://docs.astro.build/en/basics/astro-pages/","text":"Pages are files in the src/pages/ subdirectory, responsible for routing, data loading, and page layout. Supported types: .astro, .md, .mdx (with the MDX integration), .html, and .js/.ts endpoints. File-based routing makes each file an endpoint from its path; dynamic routing lets one file generate multiple pages, even for content in a collection or CMS. Link pages with standard HTML <a> elements using root-relative URL paths, not relative file paths. A page must produce a full HTML document: Astro adds the <!DOCTYPE html> declaration and <head> content to any .astro component in src/pages/ by default, and you can opt out per component by marking it a partial page. Move repeated <head> and <body> elements into layout components. Scope: Astro. Reviewed October 4, 2026.","id":"astro-best-practices:Pages and file-based routing","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Astro components and frontmatter","sourceUrl":"https://docs.astro.build/en/basics/astro-components/","text":"Astro components are the basic building blocks of any Astro project: HTML-only templating components with no client-side runtime, using the .astro file extension. A component can range from an HTML snippet to a full page layout, or, when located in the special src/pages/ folder, an entire page itself. Components never render on the client; they render to HTML at build-time or on-demand. JavaScript in the component frontmatter is stripped from the final page, adding zero JavaScript footprint by default. For interactivity, add standard HTML <script> tags or UI framework components as “client islands”; a server directive defers personalized content into “server islands” without delaying the page load. Each component has a Component Script inside a code fence (---) and a Component Template. Scope: Astro. Reviewed October 4, 2026.","id":"astro-best-practices:Astro components and frontmatter","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Islands architecture and client directives","sourceUrl":"https://docs.astro.build/en/concepts/islands/","text":"Implement Islands Architecture to convert most pages into fast static HTML, loading JavaScript only for specific interactive or personalized regions like image carousels. Avoid monolithic payloads that hinder responsiveness by using selective hydration instead of single-page application approaches. Mark interactive components with client directives, such as client:idle or client:visible, to control loading priorities and ensure elements load only when idle or entering the viewport. This isolates hydration, allowing high-priority headers to interact immediately without waiting for lower-priority carousel scripts. For server-side processing, apply the server:defer directive to Astro components to create server islands, breaking up rendering into parallel areas. This enables aggressive caching of static shells while serving dynamic content asynchronously, preventing layout shifts via fallbacks. This approach works across any hosting infrastructure, ensuring fast-by-default performance by explicitly defining which components require browser execution and leaving the remainder as static HTML. Scope: Astro. Reviewed October 4, 2026.","id":"astro-best-practices:Islands architecture and client directives","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"}]}