What is SPA (Single-Page Applications)?
source link: https://blog.knoldus.com/what-is-spa-single-page-applications%ef%bb%bf/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
What is SPA (Single-Page Applications)?
Reading Time: 2 minutes
Today, web applications are replacing the old desktop applications. They are more convenient to use, they are easy to update and not bound to the specific device. Basically there are are two main design patterns for web apps:
- Single-Page Applications (SPAs)
- Multi-Page Applications (MPAs)
Both patterns have their own pros and cons. When deciding between both patterns, it’s important to bear in mind your business goals and requirements. Let’s have a look at what are single page applications.
What’s a SPA?
Single Page Application(SPA) is a web application that fits on a single web page with dynamic actions without refreshing the page. You are using various SPA applications every day i.e. Gmail, Github, Facebook. It is just one page that you visit and use that page to dynamically re-render the content without ever requesting a second page to render by the server. In this, instead of navigating the page to another page, we just remove some elements from DOM (Document Object Model) and add new elements. Thus SPA provides a highly-interactive, very responsive and fast web page where we never have to wait, where things always happen and that is a great user experience.
Advantages of SPA:
- Debugging with Chrome: SPAs are easy to debug with chrome as you can monitor network operations, investigate page components and data associated with it.
- Fast and Responsive: SPA applications don’t update the entire page but only the required content. Most of the resources (HTML + CSS + Scripts) are only loaded once throughout the lifespan of an application.
- Code Reusability: SPA application is easier to develop as the developer can reuse the same backend code for web application and native mobile application.
- Caching Capabilities: SPA can cache any local storage effectively. If anyone has poor connectivity, then local storage can be synchronized with the server when connection allows.
Disadvantages of SPA:
- Browser History: An SPA app doesn’t save users jump between states. This means that on clicking back button browser only takes the user to the previous page, not to the previous state of an application.
- SEO Optimization: SPA provides poor SEO optimization as these applications operate on Javascript and download data on request from the client side. The URL doesn’t change and also different pages don’t have unique URL. Thus, most of the pages are not scanned by search bots for optimization of that page. Recently Google launched a new scheme to increase the SPA app SEO optimization.
- Security Issues: SPA applications are less immune to cross-site scripting (XSS) attacks. Due to XSS, it enables attackers to inject client-side scripts into the application by other users.
Recommend
-
9
Developing Micro Frontends with Single-Spa In the process of building new or modernizing older applications, backend functionality is often broken down in multiple microservices. Without modular frontends though, app...
-
5
Building Micro Frontends Using Single-SPA FrameworkStep by step guide in developing Micro frontends using JavaScript router frameworkModern web apps are becoming more and more complex over tim...
-
7
最近入职的一家公司采用single-spa这个微前端框架，所以自学了此框架。 single-spa这个微前端框架虽然有中文文档，但是有些零散和晦涩。 所以我想在学习之余，写...
-
7
single-spa Join the chat on Slack Donate to this project A javascri...
-
7
Este artigo tem como intuito resumir alguns conceitos relacionados ao single-spa, framework usado para construção de microfrontends. Os conceitos foram divididos em tópicos explicando o que é e como fazer algumas configurações em uma aplicaçã...
-
10
Multi-page SPA with React RouterMulti-page SPA with React Router08/06/2022Approach: We will create a simple website that will have different pages...
-
10
Back to PostsUsing Vite to Develop an SPA in the Context of a Production Page September 06, 202291More and more frequently,...
-
10
Module Federation vs Single-SPAA Comparative Analysis for Implementing Micro Frontend in Angular, React and Vue.js
-
4
Develop an SPA Against a Remote Page w/ ViteThere are serious benefits to building small applications in the context of a complex, remote page. Vite makes it pretty simple to pull it off.Posted on Septembe...
-
6
Defaulting on Single Page Applications (SPA) March 27, 2023 #2 Popular Tagged:
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK