Improving the Initial Rendering Performance of React Applications Through Contemporary Rendering Approaches

Abstract

Modern JavaScript frameworks have enabled the development of interactive and user-friendly web applications. Over the past decade, React has become the leading user interface framework in the JavaScript world, contributing to the rise of Single Page Applications (SPA). However, the extensive development of SPAs has led to an increase in the amount of client-side JavaScript, thus triggering performance issues in terms of initial loading times.

The speed at which a web application is initially rendered can significantly influence its potential for revenue generation, as the initial loading time often determines whether a user stays on or abandons a web page. Recognizing the integral role of the initial loading speed in user retention, this study delves into the realm of performance optimization strategies, focusing predominantly on the use of React-like UI frameworks and meta-frameworks as a means to improve the initial rendering performance of web applications. Through this exploration, we aim to provide a comprehensive understanding of contemporary rendering approaches and their role in enhancing web application performance.

To compare the performance impacts of various rendering approaches, we implement a React application simulating the dynamics of a real-world e-commerce platform and replicate the same application through multiple technologies. These technologies include the UI frameworks Preact, Qwik, and Solid, as well as the meta-frameworks Next, Astro, and Qwik City. Finally, we provide extensive benchmarks to measure the page weights and initial rendering performance of each application version.

Our findings demonstrate that the utilization of React-like UI frameworks and meta-frameworks can considerably decrease the amount of JavaScript downloaded by the client, contributing to improved initial rendering times. The most promising results are achieved by using meta-frameworks for extending the capabilities of UI frameworks with modern rendering strategies like Server-Side Rendering and Static Site Generation. However, these approaches often present significant trade-offs, such as increased Server Response Times and extended build durations.

Nykyaikaiset JavaScript-kehykset ovat mahdollistaneet interaktiivisten ja käyttäjäystävällisten verkkosovellusten kehittämisen. Viime vuosikymmenen aikana Reactista on muodostunut JavaScript-maailman johtava käyttöliittymäkehys, mikä on johtanut yksisivuisten sovellusten (SPA) yleistymiseen. Yksisivuisten sovellusten laajamittainen kehittäminen on kuitenkin kasvattanut asiakaspuolen JavaScriptin määrää aiheuttaen verkkosovellusten ensilatausaikojen pitkittymisiä.

Verkkosovelluksen ensilatausnopeudella on suoria vaikutuksia sovelluksen tuottoihin, sillä käyttäjät pysyvät varmemmin nopeasti latautuvilla verkkosivuilla. Tässä tutkimuksessa syvennytään verkkosovellusten ensilatausnopeuden optimointistrategioihin ja niiden toteuttamiseen Reactin kaltaisten käyttöliittymäkehysten sekä metakehysten avulla. Tutkimuksen myötä pyrimme tarjoamaan kattavan kuvauksen nykyaikaisista renderöintistrategioista ja niiden merkityksestä verkkosovellusten suorituskyvyn parantamiselle.

Vertaillaksemme eri renderöintimenetelmien suorituskykyvaikutuksia, toteutamme todellista verkkokauppaa jäljittelevän React-sovelluksen, ja replikoimme saman sovelluksen useiden eri teknologioiden avulla. Näihin teknologioihin lukeutuvat käyttöliittymäkehykset Preact, Qwik ja Solid sekä metakehykset Next, Astro ja Qwik City. Lopuksi toteutamme sovellusversioille joukon testejä, joiden avulla mittaamme eri toteutusten lataamien resurssien määrää sekä ensilatausnopeutta.

Tuloksemme osoittavat, että Reactin kaltaisten käyttöliittymäkehysten ja metakehysten käyttö voi vähentää huomattavasti asiakassovelluksen lataaman JavaScriptin määrää ja parantaa siten sovelluksen ensilatausaikaa. Parhaimmat tulokset saavutetaan käyttämällä metakehyksiä, joiden avulla käyttöliittymäkehysten ominaisuuksia täydennetään nykyaikaisilla renderöintimenetelmillä, kuten palvelinpuolen renderöinnillä sekä staattisten sivujen generoinnilla. Näihin menetelmiin liittyy kuitenkin usein haittavaikutuksia, kuten palvelimien vasteaikojen sekä verkkosovellusten käännösaikojen pidentymisiä.