Single-Page Application (SPA) vs. Multipage Application (MPA)

Single-page applications (SPAs) are a way of implementing a web application that uses a single index.html file. New content is dynamically loaded on the page, providing a native-app-like experience in the browser. This is precisely how popular frameworks like React work.

Note: While popular frameworks—like React, Vue, or Angular—can be used to implement SPAs, they can also be created with vanilla JavaScript.

On the other hand, the opposite of an SPA is a multipage application (MPA), where each page has its own HTML file. This is how Astro works. While SPAs are better suited for highly interactive apps, MPAs are more advantageous for SEO purposes.

Use cases of an SPA

As mentioned earlier, React excels in creating rich site interactions and delivering an app-like experience. Once the page loads, all interactions occur within the browser—including navigation—eliminating the need for page reloads and improving perceived performance. SPAs also paved the way for a component-based approach, which helps speed up development cycles because each component’s template and logic are coupled within the same file. Luckily, this is no different for Astro.

Note: In a component-based approach, each section of a page can be turned into its own component.

Let’s imagine a simple example where we have a home page and a contact page created in React. Each page is created within a JavaScript file that will be bundled together into one asset for production environments. This will be loaded into an index.html file that serves both pages on the client.

When the application loads, it creates the pages through JavaScript and subsequent navigation also happens on the client, preventing full page reloads. This creates a native-app-like experience. To summarize, consider using an SPA if the following applies:

• We’re developing highly interactive applications.

• We aim to achieve an app-like behavior.

• Navigation performance is a top priority.

Use cases of an MPA

So, when is Astro the right choice? If SEO is a top priority for our project, rendering the entire application in JavaScript might not be ideal. Website speed also influences SEO, and if we have concerns about JavaScript performance, building static pages is the recommended approach. For MPAs, each page is generated into its own HTML file. This also means that navigation triggers a full page reload.

This consideration aligns with the fact that React is primarily a UI library. Consequently, we’ll likely need additional libraries to handle other aspects of our application, such as routing. This can increase the application bundle size, potentially impacting JavaScript performance negatively. When combined with incorrect usage of the framework, it can lead to real performance bottlenecks.

To summarize, consider using an MPA if the following applies:

• Implementing SEO is a top priority

• We’re concerned with JavaScript performance

• Security is a concern

• Fast initial page loads are desired

• We don’t care about an app-like behavior

• We want to deploy a static site

• We want to cater to users with disabled JavaScript

Astro vs. other MPAs

While Astro is an MPA framework, it differs from others in the same field. Traditionally, MPA frameworks require us to write server-side code in a different language, such as Ruby or PHP. Astro simplifies things for less experienced developers by allowing everything to be written in JavaScript, whether it’s server-side or client-side code.

Note: Server-side code is executed before the page is requested, whereas client-side code runs in the browser. Network requests in server-side applications might take more time, whereas client-side code consumes more RAM and CPU.

The result is a better developer experience while still maintaining the performances of traditional MPA frameworks. It allows for the following:

• Faster page load because only static assets are served with little or no JavaScript.

• Faster development because the server and the client can share the same code.

• More consistent and easier to maintain code because everything is written in JavaScript.

Which one is better?

Ultimately, neither option is inherently better or worse than the other. It all depends on what we need to achieve. Astro is designed for MPAs, making it particularly effective for content-based websites. On the other hand, React was developed with interactivity in mind for interactive applications. With this in mind, if we’re aiming to create a web application with a native-app-like experience, Astro might not be the ideal choice. However, if we’re looking to build a content-heavy website, Astro would be a perfect fit.