Astro is an all-in-one web framework for building content-focused websites such as marketing sites, publishing sites, documentation sites, blogs, portfolios, and in some cases e-commerce sites. Astro isn’t designed for SPAs (Single Page Application) it leverages the server-side rendering rather than the client-side rendering for those that are interested in a framework for an MPA (Multi Page Application) approach.
Let’s take a deeper dive into why Astro is focused on server-side rendering for MPAs.
SPA vs MPA
Most pages for MPAs render the HTML on the server, whereas SPAs will use JavaScript to render HTML in the browser. According to Astro, such rendering can negatively impact site behaviour, performance, and SEO. Although it may sound like it would be faster to render via the browser, this is not true. An SPA will consistently perform slower on the first page load vs an MPA, unless the server rendering is used. Astro argues that page load times for content-based websites like the examples listed above make a large impact on the retention of a user on the page. They mention that for every 100ms faster, there are 1% more conversions as seen from the following study and many others that are referenced in the Astro documentation. This is why Astro is focused on providing the fastest framework using the MPA rendering.
So if you are building a site which will keep the user on a single page, rather than changing pages, this would not be the framework of choice. Astro also mentions some great frameworks you can use if you want to build a SPA instead of an MPA.
Astro Islands
What if you want to build your website using components? Astro island (aka Component Islands) is an interactive UI component on a static page of HTML. Multiple of these islands/components can be used on a single page, rendering in isolation. You can use any UI framework that you’d like with the islands, or even mix and match different frameworks as described by Astro’s documentation.
Since Astro generates every website without any client-side javascript, no matter what framework you are using, Astro will render it to HTML ahead of time, then strip out all of the javascript which is unused by default. This can speed up rendering times, however, there can be some client-side javascript that is required for creating interactive UI islands. Instead of forcing your entire page to be a SPA-like app, Astro will allow you to create one of these Islands. So the biggest benefit here is that you can build your static HTML page while using very limited client-side rendering for specific components such as a header, image carousel, etc for specific parts of the page. Keeping the site as lightweight as possible.
Project Structure
Let’s explore more of Astro’s technical structure. First, you can use the CLI wizard to include some of the auto-generated files using the create-astro command. You will see the following files/directories
Here is an example of a project tree:
├── src/
│ ├── components/
│ │ ├── Header.astro
│ │ └-─ Button.jsx
│ ├── layouts/
│ │ └-─ PostLayout.astro
│ └── pages/
│ │ ├── posts/
│ │ │ ├── post1.md
│ │ │ ├── post2.md
│ │ │ └── post3.md
│ │ └── index.astro
│ └── styles/
│ └-─ global.css
├── public/
│ ├── robots.txt
│ ├── favicon.svg
│ └-─ social-image.png
├── astro.config.mjs
└── package.json
In the above example, you can see there’s an src folder where most of the source codes live, and in it, there are some key directories that can be further explained.
src/components
There are reusable pieces of code to insert into your HTML pages. It can be for both Astro components and other frontend components created with other frameworks.
src/layouts
This is a specific kind of component to wrap content into a large page layout. It’s a common convention, but it’s not required.
src/pages
This is a required subdirectory for Astro projects. Pages are a component used to create new pages on your site.
src/styles
This is for the CSS or Sass files, however, it’s not required. As long as CSS/Sass files are located inside of the src/ directory, there shouldn’t be any issues.
Configuration
If you want to customize how Astro is configured, you can try adding astro.config.mjs file to your project. Check out all of the different configuration options here.
You can use several different file types for configuration including, .js, .mjs, .cjs, and .ts.
Conclusion
That’s just a brief overview of the framework. There is much more useful information on Astro’s documentation here. We recommend reading their docs first to fully understand what Astro is offering. So if you are looking for a framework to help with building a content-based website and you don’t want to build out a typical SPA, rather you would like to use the traditional MPA, then Astro can be a modern solution for you. It’s not going to be for everyone as this kind of development isn’t as popular as single-page applications. This, however, provides developers with a good comprehensive framework to work with for MPAs.