Web application rendering and its impact on web vitals metrics and SEO

In the last decade, the popularity of client-side rendered applications has been rising in the field of web application development. In these applications, the server returns only a basic HTML skeleton that points to a javascript application, that obtains the needed data and renders the desired page content. This approach has its advantages, especially in application interactivity, however it could have some disadvantages too – whether in worse performance when using less powerful devices or whether in more difficult and problematic content indexing by search engines. Other approaches to web application rendering attempt to address this problem. For these approaches, while the specifics of these renderings and the subsequent impact on performance and indexability are described in theory, their comparison on real-world applications is lacking. This thesis summarizes how web applications can be rendered. This problem is addressed on both theoretical and practical level. As a part of this thesis, two representative web applications are designed and implemented using four types of rendering – server rendering, client-side rendering, server-side rendering and prerendering. These applications are then used to measure, compare, and evaluate these rendering types in terms of performance and search engine optimization. Implementation complexity between these renderings is also evaluated. Another added value of this work is one of the test applications – the parish donation application, which is being used by local parish and thanks to which it was possible to measure the performance of different types of renderings on real devices.