Analiza abordărilor Server-Side Rendering pentru optimizarea aplicațiilor web

Abstract

Lucrarea este formată dintr-o indroducere, cinci capitole distincte, o secțiune de concluzie și cuprinde în total 50 pagini de text. Primul capitol, paradigme de randare web, prezintă fundamentele teoretice privind modul în care aplicațiile web sunt randate și afișate utilizatorilor. Capitolul cuprinde analiza proceselor interne ale browserului, mecanismele de generare a interfeței și principalele paradigme de randare utilizate în prezent, punând accent pe impactul lor asupra performanței și experienței utilizatorului. Astfel este stabilită o bază conceptuală necesară pentru înțelegerea diferențelor dintre CSR și SSR. Al doilea capitol, analiza comparativă între CSR și SSR, compară cele două paradigme din perspectiva SEO, securității, costurilor, scalabilității și complexității tehnice. Analiza evidențiază punctele forte și limitările fiecărei abordări, oferind criterii obiective pentru alegerea metodei de randare în funcție de cerințele aplicației web și de contextul de utilizare. Al treilea capitol, studiu tehnologic și arhitectural, explorează mecanismele moderne asociate SSR cât și framework-urile ce suportă aceste tehnici. Sunt prezentate aspectele arhitecturale, fluxuri de execuție și metodologii de optimizare, alături de comparații între tehnologii. Al patrulea capitol, implementarea practică a tehnicilor de randare, descrie procesul de adaptare a platformei Bando dintr-o aplicație bazată exclusiv pe Client-Side Rendering într-o soluție hibridă ce integrează Server-Side Rendering și prerandare. Sunt prezentate modificările arhitecturale necesare, adaptările componentelor Angular, configurarea serverului Express, gestionarea diferențelor dintre mediul browser și mediul server, precum și mecanismele asociate Transfer State și hidratare. Capitolul include totodată detalii asupra modului în care a fost integrată randarea statică a paginilor publice și asupra modului în care au fost rezolvate incompatibilitățile specifice executării codului Angular în Node.js. Prin intermediul acestui capitol, lucrarea demonstrează aplicabilitatea practică a tehnicilor teoretice discutate anterior, ilustrând tranziția efectivă către un model de randare optimizat. Al cincilea capitol, analiza performanței experimentale a tehnicilor de randare, prezintă rezultatele măsurătorilor efectuate asupra aplicației înainte și după integrarea SSR și prerandare. Sunt utilizate instrumente precum Lighthouse și Chrome DevTools pentru a evalua metrici precum TTFB, LCP, FCP, CLS, viteza de încărcare și comportamentul aplicației în condiții de rețea variabile. Capitolul include grafice, tabele comparative și interpretări ale rezultatelor experimentale, evidențiind impactul real al tehnicilor implementate asupra experienței utilizatorului și asupra eficienței aplicației. Analiza comparativă subliniază diferențele dintre randarea client-side, randarea server-side și prerandarea, oferind concluzii practice prinvind scenariile în care fiecare metodă se dovedește a fi cea mai potrivită.

The thesis consists of an introduction, five distinct chapters, a concluding section, and comprises a total of 50 pages of text. The first chapter, web rendering paradigms, presents the theoretical foundations regarding how web applications are rendered and displayed to users. The chapter includes an analysis of internal browser processes, interface generation mechanisms, and the main rendering paradigms currently in use, emphasizing their impact on performance and user experience. This establishes the conceptual foundation necessary for understanding the differences between CSR and SSR. The second chapter, comparative analysis between CSR and SSR, compares the two paradigms from the perspective of SEO, security, costs, scalability, and technical complexity. The analysis highlights the strengths and limitations of each approach, providing objective criteria for selecting the appropriate rendering method based on the application's requirements and its usage context. The third chapter, technological and architectural study, explores modern mechanisms associated with SSR as well as the frameworks that support these techniques. It presents architectural aspects, execution flows, optimization methodologies, and comparisons between technologies. The fourth chapter, practical implementation of rendering techniques, describes the process of adapting the Bando platform from an application based exclusively on Client-Side Rendering to a hybrid solution that integrates Server-Side Rendering and prerendering. It details the required architectural modifications, adjustments to Angular components, configuration of the Express server, handling of differences between the browser and server environments, and mechanisms related to Transfer State and hydration. The chapter also outlines how static rendering of public pages was implemented and how compatibility issues specific to executing Angular code within Node.js were resolved. Through this chapter, the thesis demonstrates the practical applicability of the theoretical techniques discussed earlier, illustrating the actual transition toward an optimized rendering model. The fifth chapter, experimental performance analysis of rendering techniques, presents the measurement results obtained before and after integrating SSR and prerendering. Tools such as Lighthouse and Chrome DevTools are used to evaluate metrics including TTFB, LCP, FCP, CLS, loading speed, and the application's behavior under various network conditions. The chapter includes graphs, comparative tables, and interpretations of experimental results, highlighting the real impact of the implemented techniques on user experience and application efficiency. The comparative analysis underscores the differences between client-side rendering, server-side rendering, and prerendering, offering practical conclusions on the scenarios in which each method proves most suitable.