What is Single Page Application in React


In this article, we are going to understand what is single page application in react? When we write a program in react there are lots of misconception while creating a single page application. In modern development programming, single page application is very important. let’s take a look at what is single page application (SPA).

SPA

Before the first SPA framework appeared, the landscape was dominated by Multiple Page Applications (MPAs) built in static HTML and server-side technologies like PHP, ASP, Java, Ruby, and Python.

MPAs work by making multiple requests between the client and server. As websites have grown in complexity, so have the demands they make on servers. The introduction of AJAX, which allows web pages to be updated without reloading, partly alleviate this issue.

Today many frameworks provide single page application architecture. If you have decided that building a SPA best suits your project, there is still the small matter of selecting a SPA framework.

I will list out 3 important frameworks which you can use to build a single page application.

  1. React.js
  2. Angular
  3. Vue.js

These three frameworks are comfortable working with single page application.

Single Page Application

The process of Single Page Application.
  1. So let’s say you are the user using single page application. The first thing you would do is Request a new URL.
  2. This is your browser window and this is a server. So when you request a new URL the browser sends a URL request to the server.
  3. The server responds to the request with static assets such as HTML, CSS, and JavaScript. This request has only a skeleton of the webpage.  when this step will be happening you might see loading or spinning animation.
  4. Just after that, the static assets Include the JavaScript code for single page application. When the JavaScript code loaded this additional code makes an ajax request for data.
  5. Just after that, the data came back with the JSON, XML or any other format.
  6. Once you have a data received from the server the HTML skeleton render the missing data on the web page.
  7. When the browser rendering is finished, The single page application will replace the loading message or animation and you can see your actual web page on the browser. Now you can work on this webpage.

Now when you have your web page you might perform data request to the server.

So if you request for any data from the server Just like clicking on the submit button to submit your data or to request any information by clicking on the button.

Now triggering a new request From a single page application to the server will cycle URL request to the server. Get the response from the server and render HTML on the browser.

Single page application will not reload the entire page.  using single page application when you request for a data the page will render the specific section which you had requested. You will get your render data in the specific HTML element. The server will not reload the complete application to render this data on the webpage.

This is very crucial when you are working with the huge website. This architecture helps us to improve the performance of the website. So this is single page application architecture.

 

Now let’s take a few pros and cons of single page application.
  • When you are using SPA Pages load faster when a user navigates within the application which results in snappier” user experience after the initial load. Richer applications can be built with Single Page Applications.
  • SPA frameworks can be used to develop mobile applications that facilitate code reusability down to the level of UI elements.
  • It takes more time to initialize the application as it has to be downloaded to the user’s device. But this can be improved by server-side rendering. SPAs require the user to have JavaScript turned on.
  • SPA code can be hard to trace. Especially when integrating third-party modules and plugins.
  • Single Page Applications are newer and you need to be familiar with the specific framework and tools (eg: NPM, Webpack, SystemJS, Gulp).

So these are a few pros and cons of using single page application.

SPA

With multi-page apps, these three things come for free. There is nothing extra you have to do for any of it. With single-page apps, because you aren’t navigating to an entirely new page, you have to do real work to deal with these three things that your users expect to just work. You need to ensure that navigating within your app adjusts the URL appropriately. You need to ensure your browser’s history is properly synchronized with each navigation to allow users to use the back and forward buttons. If users bookmark a particular view or copy/paste a URL to access later, you need to ensure that your single-page app takes the user to the correct place.

That’s it. I hope you understand what is single page application is all about. In the next article, we will explore more about react.

Leave a Reply

Your email address will not be published. Required fields are marked *