Why Astro.js is Your Go-To Framework for Content-Heavy Websites with Chris From Coding In Public

Astro has been making waves in the web development community, and for good reason.

In a recent conversation with Chris from Coding in Public, we dug into what makes Astro special.

From its zero-JavaScript default behavior to its content-focused architecture, Astro offers a refreshing approach to building content-rich websites.

Zero JavaScript by Default

One of Astro's flagship features is that it ships zero client-side JavaScript by default.

This means when you build a site with Astro, the pages are mostly static HTML unless you explicitly add interactivity.

By rendering content as plain HTML on the server (either at build time or request time), Astro ensures fast page loads.

Any JavaScript you include in an Astro component's front matter or setup is stripped out during the build, resulting in no JavaScript being sent to the browser unless needed.

The outcome is a faster, lighter website with great performance out of the box, as Astro doesn't automatically bundle a large JavaScript payload for each page.

If you do need interactivity, you can, of course, add it – Astro supports all popular frameworks, such as React, Svelte, Vue, and others, but you opt-in only where necessary.

This "opt-in only" approach to client-side JS is part of Astro's secret sauce for speed.

Island Architecture and Selective Hydration

Astro popularized the " islands architecture" for web UI, which is all about selective hydration of interactive components.

Check out this great talk on Building faster content-driven sites with Astro by Matt Kane with Matt Kayne at the recent StrapiConf

In practice, Astro will render most of your page as static HTML but let you designate certain components as "islands" that can hydrate on the client side when needed. Instead of loading a single giant bundle for the entire page (like a typical Single-Page Application, or SPA), Astro only sends JavaScript for the interactive elements.

To make a component an interactive island, Astro uses directive modifiers like, client:load, client:idle, or client:visible.

For example, adding client:load to a component (e.g., <MyComponent client:load />) tells Astro to load and hydrate that component's JS at page load.

You can learn more about this in the Astro documentation.

Similarly, client:idle will wait to hydrate until the browser is idle, and client:visible waits until the component scrolls into view before loading it.

This fine-grained control enables you to prioritize important UI components (such as a header or menu) to load immediately while deferring less critical widgets (like a footer, newsletter signup, or image carousel) until later.

The result is a progressively enhanced page where only the necessary JavaScript gets delivered, keeping performance high.

This island approach is a big part of how Astro achieves its performance goals.

By default, an Astro site is an MPA (multi-page app) with server-rendered HTML and no JavaScript, and you opt-in to dynamic behavior where needed.

Chris noted that this design felt very intuitive: you start with simple static content and sprinkle in interactive elements as the site requires.

The outcome is great Lighthouse scores and happy users without giving up the ability to use interactive components.

Content Collections and Type-Safe Content

For content-heavy sites, such as blogs or documentation, Astro provides a feature called Content Collections.

This was introduced in Astro 2.0 (and significantly expanded in Astro 5.0's Content Layer API) to help manage structured content.

Content Collections lets you organize your Markdown (or MDX/JSON/YAML) files into collections, and they provide automatic TypeScript types and schema validation for that content.

In other words, Astro can treat your Markdown content as a typed data source.

Using Content Collections involves defining a collection schema (using Zod for validation) and a content loader to pull in the files.

Astro has built-in loaders, such as glob() for finding all files in a directory or file() for a single JSON or YAML data file.

You configure collections in a src/content.config.ts file by using defineCollection() with a loader and an optional schema.

The schema, defined with Zod, ensures that each content entry's front matter meets the expected shape (for example, you can require every blog post to have a title, description, publish date, etc., of the correct types).

Astro will enforce this at build time – if any Markdown file has missing or invalid frontmatter fields, the build will error, which is incredibly helpful for catching content issues early.

By relying on Zod for frontmatter and content validation, Astro gives you confidence that your content is consistent.

As Chris from Coding in Public pointed out, this level of type safety for Markdown is a game-changer for content-rich sites.

It means you can query your content collections, knowing the data will be there in the right format.

Overall, content collections make Astro especially attractive for blogs and documentation projects where you want to mix the simplicity of Markdown with the power of a structured data schema.

Note: While Astro's content collections are excellent for developers managing content in files, you might integrate a headless CMS like Strapi for a more user-friendly editing experience. Strapi provides a full admin UI for creating and managing content, which can be very useful if non-technical users need to contribute.

Astro can pull content from Strapi's API with ease (the official docs even provide a guide on connecting Strapi with Astro)Strapi and Astro, giving you the best of both worlds: Astro's performance and flexibility, plus Strapi's user-friendly CMS interface.

You can checkout out this Astro Loader that I am building in public Strapi Content Loader (Community Project)

I also created this community project, Astro and Strapi Starter, which you can use to get started with Astro and Strapi.

Contributions are welcome!

There is also this cool package from VirtuaLab to esilly allow you to render Strapi's Block Editor Content in your Astro App.

You can also check out the Strapi's Crash Course, where I walk through how I built out the backend for our Astro app.

If you are looking for a great Astro Course, Chris from Coding in Public has got you covered.

I bought his course a while back, and that is how I discovered Chris. Outside of the docs, this was how I learned Astro.

Even he said how awesome Astro Docs are. And you can learn everything you need to know there.

However, if you prefer video content with detailed explanations and numerous examples, consider his course.

He was nice enough to provide a 20 percent discount if you use the code strapi.

Deploying Astro: Adapters for Every Platform

Another strength of Astro is its flexibility in deployment. Astro can build fully static sites (no server required, just HTML files that can be hosted anywhere), or it can support server-side rendering (SSR) for dynamic functionality.

To enable SSR, Astro utilizes a modular adapter system.

There are official adapters for popular platforms, such as Vercel, Netlify, and Cloudflare, as well as a generic Node.js adapter for custom or self-hosted environments.

An adapter is a small plugin that knows how to deploy your Astro app to a specific serverless or server platform.

For example, if you want to deploy to Netlify, you'd install @astrojs/netlify and add the netlify() adapter in your config.

This tells Astro to output the build in a format that Netlify's Functions can run: contentReference.

Likewise, the Vercel adapter prepares your app to run as serverless functions on Vercel, and the Cloudflare adapter targets Cloudflare Workers.

Suppose you're deploying to a traditional Node server. In that case, the Node adapter will output an Express-compatible handler you can integrate into your own.

Chris highlighted that this adapter approach made Astro extremely versatile – you can start by deploying a static site (no adapter needed at all for static export), and later switch to an SSR deployment on, say, Vercel by just adding the adapter.

It's a smooth path to scaling up features like auth or real-time APIs if your site grows beyond static content. Regardless of where you host, there is likely an Astro adapter available for it, or you can build one using the Adapter API.

Developer Experience and Stability

Astro's developer experience (DX) is another area where it shines.

The Astro team has invested a significant amount of effort in making the framework easy to use.

There's a friendly CLI (npm create astro@latest) that sets up new projects interactively, an official VS Code extension for Astro that provides syntax highlighting and IntelliSense, as well as first-class TypeScript support built in.

The .astro file syntax is very approachable (essentially HTML + some JSX-like templating), so if you know basic web development, Astro feels familiar.

Chris mentioned that he appreciated Astro's simplicity – building a "Hello World" blog with just HTML and Markdown is trivial. Then, you can incrementally adopt more advanced features as needed.

The learning curve is gentle, yet Astro doesn't shy away from providing power users with the tools they need (routing, data fetching, server-side logic, etc., are all available when needed).

Despite Astro's relatively young age, it has proven to be quite stable.

The framework follows semantic versioning and has maintained a rapid yet smooth release cadence. As of this writing, Astro is on version 5.x and continuing to evolve.

Notably, the team provides detailed upgrade guides for each major. This means you can confidently keep your Astro project up to date with new features and improvements without fearing sudden breakage.

In practice, many minor or patch releases introduce enhancements and fixes that you can adopt gradually.

The documentation is updated with every release to reflect any changes, and the community (on Discord and GitHub) is active in helping developers migrate if any breaking changes occur.

Chris noted that the Astro maintainers have been thoughtful about balancing new innovation with keeping things stable for users – a crucial factor for any technology he adopts for content sites that need to "just work" in the long run.

Conclusion

Astro's content-focused approach — HTML-first, JavaScript only as needed — resonates with developers who care about performance and simplicity.

In our chat, Chris expressed how Astro "just makes sense" for building blogs, landing pages, storefronts, and marketing sites where the primary goal is to deliver content quickly and efficiently.

With features like island architecture for partial hydration, content collections with type safety, and a flexible adapter system for deployment anywhere, Astro empowers developers to create fast websites without sacrificing modern capabilities.

If you haven't tried Astro yet, it's time to give it a try.

As Chris's experience demonstrates, Astro can provide an enjoyable developer experience, resulting in websites that are both blazing fast and easy to maintain.

Suppose you're building a personal blog or a large content site. In that case, Astro offers a compelling toolkit that is backed by thorough documentation and an enthusiastic community.

It's no surprise Astro is gaining popularity — it hits that sweet spot of being minimal by default yet adaptable when you need more. 🔭✨

📚 Resources & Links

• 🎥 Chris's YouTube Channel: Coding in Public
• 🚀 Astro Course: learnastro.dev (use code STRAPI for 20% off)
• 📹 Astro and Strapi Starter: GitHub
• 🔌 Strapi Content Loader (Community Project): GitHub
• 📹 StrapiConf Talk: Why Astro Is Awesome by Matt Kane – Watch It Here