Why is React Js called as Single Page Application

Question

I often hear and see posts regarding react is single page app but never understood what is SPA and many say that it doesn't reload the pages but i didn't understood why so could you guys please explain me with simple examples?

Chorus

Does this answer your question? what is single page application? – Phia

Answer 1

A Single Page Application is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.

This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page.

The goal is faster transitions that make the website feel more like a native app

Example: Netflix

This is the dashboard, and when we click on any movie, it changes to /watch and the content is rewritten.

In Technical Terms:

When building your react-app, you can see that there is only one App.js from where your entire web-app is loaded in fragments and components. This behaviour of rendering components and pages on a single page and changing the DOM( is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.

Xochitlxp

I never agreed with that naming. I would call it a "reverse navigation application" since the navigation is managed on the client, the browser still navigates to a different resource and sometimes downloads additional resources, just like an asp.net mvc page or web forms page. – Einstein

react doesn't do routing out of the box, so how is it called SPA if the main feature of SPA (routing) isn't part of it – Colorado

Answer 2

As mentioned in Glossary of React Terms:

A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.

And about "Why is React Js called as Single Page Application":

Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.

Recrement

Answer 3

ReactJS is an open source JS library for building UI and used for SPA, and it manages the views of web apps. Reactjs can help you to modify your data without reloading of a page. It is a popular library in the market trend because of its scalability & fast performance.

Single Page applications are different from multiple page apps that we see everywhere because the SPA doesn't move into new pages; instead, it will load the pages inline within the same page.

Bunt

but react does not come with routing out of the box, so how is SPA accomplished without routing? – Colorado

Answer 4

A single page application has one single page e.g. www.google.ch. It is exactly one HTML file (with all its required dependencies) loaded into the browser. You'd navigate between paragraphs only using hash-router, but never ever visit another page like www.google.ch/maps (that would then be www.google.ch/#maps, which references / -> index.html) (tho google may not be the best example, it is more about URIs).

Gondi

Answer 5

In traditional websites, when we go from one page to another, the whole site is loaded. e.g - if you go from "www.example.com/hi" to "www.example.com/hello" the whole website is reloaded. No matter how much portion of the website is really changed. Let's say, the website has "Sidebar, logo, menu" on both of its pages, then the full reload doesn't make any sense. This takes too much time and decreases the performance.

Single Page Applications, as the name suggests, have only one single page that is loaded the first time you open the website. After this, no matter where you click, it is not gonna refresh the website fully.

browser reload button

The loading icon of the browser doesn't load when we move from one page to another on SPA site, as it does on the traditional websites.

Cons- SPA sites are great for UI UX but they are not the best when it comes to Search Engine Optimisation, it creates problems with rankings.

Heedful