Working with Astro

In this section, we are going to review some options you have with Astro and how you can use them. Let's see what type of framework Astro is.

MPA Framework

Understanding the tradeoffs between Multi-Page Application (MPA) and Single-Page Application (SPA) architecture is key to understanding what makes Astro different from other web frameworks like Next.js and Remix.

A Multi-Page Application (MPA) is a website consisting of multiple HTML pages, mostly rendered on a server. When you navigate to a new page, your browser requests a new page of HTML from the server. Astro is an MPA framework. Traditional MPA frameworks also include Ruby on Rails, Python Django, PHP Laravel, WordPress, Joomla, Drupal and static site builders like Eleventy or Hugo.

A Single-Page Application (SPA) is a website consisting of a single JavaScript application that loads in the user’s browser and then renders HTML locally. SPAs may also generate HTML on the server, but SPAs are unique in their ability to run your website as a JavaScript application in the browser to render a new page of HTML when you navigate. Next.js, Nuxt, SvelteKit, Remix, Gatsby, and Create React App are all examples of SPA frameworks.

Astro Islands

Astro Islands (aka Component Islands) are a pattern of web architecture pioneered by Astro. The term “Astro Island” refers to an interactive UI component on an otherwise static page of HTML. Multiple islands can exist on a page, and an island always renders in isolation. Think of them as islands in a sea of static, non-interactive HTML. Learn more about Islands here.

JSX-like Expressions

You can define local JavaScript variables inside of the frontmatter component script within an Astro component. You can then inject these variables into the component’s HTML template using JSX-like expressions! Learn more about Expressions here.

Component props

An Astro component can define and accept props. These props then become available to the component template for rendering HTML. Props are available on the Astro.props global in your frontmatter script. Here is a component example using props:

---
const { greeting, name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

You can then use the component in your pages like this:

<GreetingHeadline greeting="Howdy" name="Partner" />

Learn more about Astro props here.

Markdown & MDX

Markdown is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for standard Markdown files.

With the @astrojs/mdx integration installed, Astro also supports MDX (.mdx) files which bring added features like support for JavaScript expressions and components in your Markdown content. Use either or both types of files to write your Markdown content!

Learn more about Markdown content here.

Routing

Astro uses file-based routing to generate your build URLs based on the file layout of your project src/pages/ directory. When a file is added to the src/pages directory of your project, it is automatically available as a route based on its filename. An Astro page file can specify dynamic route parameters in its filename to generate matching pages. For example, you might create an authors/[author].astro file that generates a bio page for every author on your blog. author becomes a parameter that you can access from inside the page.

In Astro’s default static output mode, these pages are generated at build time, and so you must predetermine the list of authors that get a corresponding file. In SSR mode, a page will be generated on request for any route that matches.

Learn more about routing in Astro here.

Running the project

Now that we've learned a little more about Astro, let's see how we can run the project.

Launching the development server

To run the project, run this command in your terminal window, at the root of the project :

pnpm dev

A development server is launched and you can open your browser and start making changes to the template. Hot reloading is activated and automatically refreshes the page when a change is made.

Building the project

To build the project, it works like above, by running a simple command. To run the build process, run:

pnpm build