As developers, we're constantly striving to create apps that provide seamless user experiences. Two popular approaches to achieving this are Multi-Page Applications (MPAs) and Single-Page Applications (SPAs). In this article, we'll dive into the world of HTMX and React to explore the differences between these two strategies.

Definitions

Before we begin our comparison, let's define what MPA and SPA mean. A Multi-Page Application is a web application that returns fully rendered HTML pages, which are handled by the browser as each link click/change triggers a full page reload. JavaScript is used to enhance some pages and components, adding dynamic behavior where it's not possible with static HTML or CSS.

On the other hand, a Single-Page Application is an approach to develop web applications where HTML is rendered mostly or completely by JavaScript on the client side. Data is fetched from the server in JSON format, and transforming this data to HTML is done by JavaScript.

User Experience

So, how do these two approaches differ when it comes to user experience? In both cases, we have inline validation – inputs and forms deliver the same user experience since there are no full page reloads. Full page reloads are incredibly fast, with CSS and JS assets shared and cached between HTML pages. This excellent performance makes it almost impossible to notice that pages are indeed fully reloaded.

In fact, our Lighthouse test results for both implementations show impressive performance metrics:

  • HTMX Multi Page Application: Performance 100, First Contentful Paint (FCP) 0.8 s, Largest Contentful Paint (LCP) 1.0 s
  • React Single Page Application: Performance 100, FCP 1.4 s, LCP 1.4 s

While both are swift, the MPA has slightly better metrics. This difference is also noticeable in practice – when clicking to see new pages, the HTMX MPA returns a fully visible and rendered page immediately, whereas the React SPA version changes the URL to the new page address, but then requires a fetch API call to finish before the page becomes fully interactive.

Performance

To understand this difference better, let's compare what's required for a particular page to be fully visible and functional. For MPA, we need:

  • GET HTML page from /projects url for example
  • Inside this page, there are links to required CSS and JS assets – they can be and are fetched in parallel
  • These CSS and JS assets are reused (are the same) across all pages and are aggressively cached, so they're usually downloaded just once per user session

As a result, time to get fully visible and functional is much faster with MPA.

Conclusion

In conclusion, while both MPA and SPA approaches have their strengths and weaknesses, the MPA approach offers a more seamless user experience. By leveraging HTMX, we can create apps that provide fast and responsive navigation between pages. Whether you're building a complex web application or a simple tool, understanding the differences between MPA and SPA will help you make informed decisions about which approach is right for your project.

Target Keyword: app user experience