Comparing the impact of frontend architectures on performance and sustainability in web applications : An evaluation of React SPA, Astro/Svelte Islands, Astro/Svelte Full Load and their impact on performance and sustainability

Sammanfattning

Context. Web applications can be built with different frontend architectures. They all have their own advantages and disadvantages. They differ in many traits, but this study researches their performance, resource usage, and the possibility of interactivity. Web pages are getting heavier, with JavaScript bundle size being the main driver, affecting performance and sustainability. This is why researching alternative architectures is relevant. Objectives. The study investigates three different approaches to creating the same web application and compares their results. The study explores the effects on performance and sustainability by measuring key web vitals. The objective is to understand how a React SPA performs against two different hydration strategies in an Astro + Svelte configuration. Methods. A empricial study is performed in a controlled environment. Testing pages with identical functionality and UI. Results. The Astro + Svelte combination mostly performed better, both in performance and stability, while shipping less data. React had one edge case where it performed better, in raw numbers, on its Largest Contentful Paint for a lightweight web page, but generally put a higher load on the client. Performance correlates strongly with sustainability in a positive way. Most results show that the lighter, less hydrating strategy produces better performance figures. Conclusions. The study shows that the hybrid setup performs better in most tests but has some minor downsides in handling state. The research also raises questions about the real needs of an application and its interactivity requirements. A hybrid approach is probably good enough for most applications.