Most marketing websites are static content with a sprinkle of interactivity. A contact form here, an animated counter there, maybe a carousel. Yet the default choice for many teams is still a React-based framework that ships hundreds of kilobytes of JavaScript to render what is essentially HTML and CSS.
Astro takes a fundamentally different approach, and it is the right one for this use case.
Zero JavaScript by Default
When you build a page in Astro, the output is plain HTML and CSS. No runtime. No hydration. No virtual DOM diffing on the client. The browser receives exactly what it needs to paint the page and nothing more.
This is not a limitation. It is a design decision that produces measurable results:
- Time to Interactive drops to nearly zero because there is no JavaScript to parse and execute
- Lighthouse scores consistently hit 95-100 without any optimization tricks
- Core Web Vitals pass easily, which directly impacts search rankings
For a marketing site where every millisecond of load time affects conversion rates, this matters more than any framework feature.
Island Architecture
The real innovation in Astro is how it handles the parts of your site that actually need JavaScript. Instead of hydrating the entire page, you mark specific components as interactive “islands” in a sea of static HTML.
---
import Header from '../components/Header.astro';
import ContactForm from '../components/ContactForm.tsx';
import Footer from '../components/Footer.astro';
---
<Header />
<main>
<h1>Get in touch</h1>
<!-- Only this component ships JavaScript -->
<ContactForm client:visible />
</main>
<Footer />The client:visible directive tells Astro to only load and hydrate the contact form when it scrolls into view. The header, footer, and everything else remains static HTML. You can also use client:load for immediately interactive components or client:idle to defer until the browser is idle.
This is not just an optimization pattern. It changes how you think about building pages. You stop asking “how do I make this page lighter?” and start asking “which specific parts of this page actually need to run code in the browser?” The answer is usually very few.
Content Collections
Marketing sites are content machines. Blog posts, case studies, landing pages, team bios, testimonials, changelog entries. Astro’s Content Collections give you a type-safe, schema-validated way to manage all of it.
const blogCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
publishDate: z.coerce.date(),
category: z.enum(['Marketing', 'Design', 'Tutorial']),
tags: z.array(z.string()),
readingTime: z.number(),
featured: z.boolean().default(false),
}),
});Every piece of content gets validated at build time. If someone adds a blog post with a missing title or an invalid category, the build fails with a clear error message. No runtime surprises. No “undefined” showing up on the production site.
Querying content is equally clean:
const posts = await getCollection('blog');
const featured = posts.filter(post => post.data.featured);
const sorted = featured.sort((a, b) =>
b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
);This is just TypeScript. No GraphQL layer, no special query language, no plugin system to learn.
How It Compares to Next.js and Gatsby
Next.js is an excellent framework for applications. Dashboards, authenticated experiences, real-time features, complex client-side state. If you are building something that behaves like a web app, Next.js is the right choice. But it carries overhead that marketing sites do not need. Server components help reduce client JavaScript, but you are still operating within a React paradigm that assumes interactivity is the default.
Gatsby pioneered the static site generation approach for React but accumulated significant complexity over the years. The GraphQL data layer, the plugin ecosystem, and the build times became pain points that drove many teams away. Gatsby’s core insight was correct, but the implementation grew unwieldy.
Astro learned from both. It took Gatsby’s insight that marketing sites should be static-first, combined it with Next.js-level developer experience, and added the crucial innovation of framework-agnostic island architecture. You can use React, Vue, Svelte, or Solid for your interactive components without committing your entire site to one framework.
Performance Is Not a Feature, It Is the Product
For marketing sites, performance is directly tied to business outcomes:
- A 1-second delay in page load time reduces conversions by 7%
- 53% of mobile users abandon sites that take longer than 3 seconds to load
- Google uses Core Web Vitals as a ranking signal for search results
When your framework ships zero JavaScript by default, you start from a position of strength. You are not optimizing away bloat. You are adding only what you need.
What Astro Starter Does With All of This
Astro Starter is built to take advantage of every one of these strengths. The template ships with Content Collections pre-configured for blog posts, a design system built on Tailwind CSS v4, and a component library that uses Astro components for static content and reserves client-side frameworks only for genuinely interactive elements.
The result is a production-ready marketing site that scores 100 on Lighthouse out of the box, supports dark mode, includes SEO metadata, and deploys to any static hosting platform in minutes.
If you are building a marketing site, portfolio, documentation site, or any content-driven website, Astro is the framework that respects what your site actually is: content that people want to read, not an application that needs to run code in their browser.
