Introduction

Modern web applications play a critical role in shaping user experience, influencing the convenience, performance, and security of web resources. With the growing number of users and their demands for application speed, designing an optimal architecture becomes a key factor in success. The most popular approaches are single-page and multi-page applications (SPA and MPA), each addressing different needs and facing various limitations. Additional parameters, such as server-side rendering (SSR) or client-side rendering (CSR), as well as hybrid approaches, allow developers to select the most suitable method for a specific development environment and target audience.

It is important to note that architectural choice directly affects application performance and scalability, making it essential to consider the specifics of each approach. For example, hybrid architectures implemented in frameworks like Next.js and Nuxt.js combine the advantages of SSR and CSR, ensuring higher performance and flexibility. The aim of this study is to provide an analysis of various architectural approaches for web applications, their comparative characteristics, and practical application recommendations.

Main part. Architectural approaches to frontend development

Web application architecture significantly impacts performance, ease of development, and user experience. Among popular approaches are SPA and MPA applications, along with SSR and CSR rendering methods. Each of these approaches has unique characteristics and is suited to specific types of projects (table 1).

Table 1

Applicability of approaches depending on project type [1, 2]

Architecture SPA refers to an approach in which the entire application is loaded into the user’s browser at once. Further interface changes happen dynamically, updating only the elements of the page with which the user interacts. The main advantage of this approach is the responsiveness of the interface: as there is no need to reload the page, interactions become smoother and more user-friendly. This is especially important for applications with high user activity, such as social networks and dashboards [3].

In contrast, MPA architecture is structured in such a way that each new page is loaded from the server, rather than being dynamically updated. This approach is more suitable for SEO optimization, as each page can be indexed, improving the site’s visibility in search engines. MPA works well for content-driven sites, such as news portals and blogs, where each page’s SEO value is important.

The main advantage of SSR is its effectiveness for SEO and performance on lower-end devices. Pages loaded through SSR are ready for indexing immediately after rendering, making it a preferred approach for SEO-heavy sites like e-commerce platforms and news sites [4].

In CSR, the entire rendering process is handled on the client side using JavaScript. This method allows for the dynamic loading and updating of individual interface elements as needed, increasing responsiveness and reducing server load. CSR is best for applications that involve high user interaction, such as monitoring systems and interactive maps, where quick response times are crucial [5].

Hybrid rendering combines SSR and CSR, offering the most balanced approach. With hybrid rendering, key content is rendered on the server to boost SEO and speed up the initial load, while less important elements are handled by the client side, reducing server load and enabling dynamic interface updates. This method works well for complex applications that require both SEO optimization and high interactivity, such as large news portals or marketplaces. Hybrid rendering allows for better resource management across servers and client devices, improving performance and user experience. Frameworks like Next.js and Nuxt.js support hybrid rendering, enabling developers to optimize applications for different audiences.

Technological features of architectures and frameworks used

The choice of architecture for web applications is closely tied to the use of specific frameworks and technologies that ensure functionality, scalability, and ease of development. Modern frameworks offer various approaches to creating and managing components, state, and rendering. The primary frameworks commonly used for building SPA and MPA applications are React, Angular, and Vue. These frameworks have vast ecosystems that include plugins, component libraries, and testing tools. For example, React uses Redux for state management and Next.js for server-side rendering, Angular provides built-in tools and architectural solutions, and Vue offers intuitive libraries such as Vuex and Nuxt.js. Additionally, these frameworks are among the most popular, according to the Stack Overflow Developer Survey 2023 (fig. 1).

Figure 1. Most used web frameworks among developers worldwide [6]

React, developed by Meta, is a library for building user interfaces based on a component-based approach. Its main goal is to provide high speed and performance through the virtual Document Object Model (DOM), which updates only the parts of the interface that have changed, rather than re-rendering the entire page. This makes React a popular choice for creating SPA, as it ensures smooth interaction and reduces server requests.

One of React’s significant advantages is its flexibility and vast ecosystem, which includes libraries like Redux and MobX for state management, and Next.js for SSR. Redux offers a strict state management structure, crucial for large projects where many components may share the same state. Next.js adds SSR and hybrid rendering to React apps, improving SEO and performance.

Angular, developed by Google, is a complete framework for building complex and scalable web applications. Unlike React, Angular provides built-in solutions for most tasks, including state management, routing, and data validation. It uses two-way data binding to automatically synchronize data between the model and view, simplifying the handling of dynamic data and boosting performance.

Also, Angular enforces a strict code structure with TypeScript, which aids in project scalability and maintenance. However, its high complexity and the need to learn many built-in tools and concepts, such as directives, services, and components, can pose challenges for beginner developers. Angular is widely used in enterprise applications where stability, scalability, and complex client-side logic are critical.

Vue is a lightweight and flexible framework that focuses on ease of use and gradual integration into projects. Vue combines the best features of React and Angular by providing two-way data binding (like Angular) and a component-based approach (like React). This makes it versatile and user-friendly for developers with varying levels of experience.

This framework supports SSR through Nuxt.js, which, like Next.js for React, offers hybrid rendering and improved SEO optimization. This makes Vue particularly attractive for developing SEO-driven, interactive interfaces. Vue is also known for its small size and high performance, making it suitable for both SPA and MPA. Its key advantage is the low entry barrier due to its intuitive syntax and well-structured documentation.

Analysis of the advantages and disadvantages of architectural approaches in development

Each architectural approach to frontend development, along with the frameworks used to implement them, offers distinct advantages and trade-offs regarding ease of use, performance, scalability, and the development process itself. SPA created using frameworks like React and Vue, provide flexibility for developers and allow for efficient interface management by updating only the modified components. This reduces the amount of code and simplifies the development of highly interactive user interfaces, but it may require the use of external tools for state management (e.g., Redux for React), which can complicate the development process.

On the other hand, MPA, often developed with Angular, come with built-in tools for routing and state management. They offer a more structured architecture, which is useful for large projects, but may require deeper knowledge of the framework and could slow down the initial development phase. Therefore, MPA are better suited for projects that require organization and formal state management, making long-term development more manageable.

From a scalability standpoint, SPA can be challenging under heavy loads and growth. For instance, as the number of components and complexity of state management increases, significant code optimization may be necessary. Frameworks like React and Vue are well-suited for large SPA, but scaling such systems requires careful planning of data and state structures.

Conversely, MPA scale more easily due to separate pages and the loading of only the necessary data for each one. This approach makes MPAs an optimal solution for complex web applications with large amounts of content, such as e-commerce sites and corporate portals, where each page can be independently processed. Angular is particularly effective for scaling, as it supports a strict structure and state management across different parts of the application [7].

Performance is closely linked to the nature of the application and its speed requirements. SPA offer higher responsiveness because, after the initial load, only the modified elements of the page are updated. However, the significant initial load time can degrade user experience, especially on slow internet connections. Techniques like code-splitting and lazy loading are used to improve SPA performance, but these require careful design.

In contrast, MPA load separate pages as needed, reducing initial load times and improving the perception of performance upon the first load. However, each page transition requires a full reload, which can create delays and negatively impact user experience in applications with active navigation. Hybrid approaches, such as SSR and CSR, combine the strengths of both methods. For instance, SSR reduces load times by pre-generating HTML pages on the server, while CSR allows for dynamic interface updates.

User experience is heavily influenced by performance but also includes factors like smooth navigation, interface responsiveness, and accessibility across devices. SPAs offer users a seamless experience as navigation between interface elements does not require a page reload. This ensures a comfortable user experience in applications like social networks and interactive dashboards, where quick feedback is essential. However, poor initial load times or long delays can cause discomfort [8].

While MPAs provide a simpler rendering approach, they can create discomfort with frequent page switches, especially if the server infrastructure is not optimized for fast responses. The impact on users also depends on the rendering choice: server-side rendering in MPA or hybrid apps improves SEO and shortens the time required for a full-page load. This makes MPA ideal for content-heavy websites where users expect stable and predictable interactions.

Conclusion

In analyzing the architectural approaches to frontend web applications, whether SPA, MPA, SSR, CSR, or hybrid architectures, the choice should be based on the project’s specifics and its target audience. Each approach has its advantages and disadvantages, impacting performance, scalability, and user experience. SPA built with React or Vue provide high interactivity and quick interface operation, making them suitable for applications with heavy user interaction. On the other hand, MPA and SSR, especially with Angular, are more appropriate for corporate portals and SEO-driven resources.

Hybrid approaches, like Next.js and Nuxt.js, combine SSR and CSR, offering optimal solutions for projects with high SEO and scalability requirements, such as e-commerce platforms and news portals. It’s important to note that the flexibility and performance of the final product largely depend on the thoughtful selection of framework and architecture, as well as proper code optimization. Ultimately, adapting the architecture to the projects and audiences needs will allow developers to create efficient and user-friendly applications that can compete in an environment of growing user demands and rapidly evolving technologies.