SPA

Single Page Application

Single Page Application (SPA) is an approach to creating websites.

In contrast to the traditional approach, in the moment the client performs the action the whole page will not be reloaded. SPA dynamically reloads and sends to the client only the data that the client requested.

If you look at the bottom right corner of the page, there is a link to chat with us. On each standard page, when you move between subpages, the chat is turned off and reloaded, there is a delay of a few seconds before the chat will load again. In the case of our site, the chat is not "unmounted" at every transition between subpages. This well illustrates the differences in operation between the traditional site and SPA. If you install chat in your online store, it is better if it does not disappear and appear every now and then. 

Chat is a great example because it is a visible element for the client and it is easy to understand how SPA works on this example. However, similar to chat, all other invisible client resources are also reloaded, which involves both server and client browser resources.

To illustrate this even better, let's assume that an online store customer is in category A and wants to go to category B

Traditional site

  1. 1. Customer request is sent to the server (Bakcend). Then the customer must establish a new connection to the server.
  2. 2. After receiving the request, the server creates the given store subpage. He must create a new page, load the product list, banners and do all the other work necessary to create a Category B. He can do this with "cache" files to speed up the creation process, but the process must be carried out.
  3. 3. After creating the page, the complete whole page is sent to the client.
  4. 4. Additional files such as JavaScripts, CSS style sheets and photos are attached to the page. The customer must download all this information as soon as the new page has been downloaded.

    The client sends a request for a new page → Connecting → BACKEND creates the page → The client receives the page -> The client loads the Frontend → The client loads the photos, CSS, JS files

Single Page Application

  1. 1. The client request is not sent directly to the backend, it is intercepted by Frontend, no need to establish a new connection to the server, therefore the response to client action is immediate.
  2. 2. Frontend decides if it has all the necessary data to display new content to the client and if so reloads only the part of the page that needs to be changed. If new data is needed from "Backend", the frontend will send a query to the server and replace the data with new data. In this case, the backend does not create a whole new page, but only the given fragment for which it was requested. In addition, with the appropriate structure of the application it is possible to replace this fragment so quickly that virtually imperceptible by the store's customer.

    The request for a new page → FRONTED changes the page fragment → The customer replaces the page fragment → The customer loads the photos.

Single Page Application has been used for years. For example, the "gmail" internet e-mail client is created as a SPA. In online stores it is still a rarity, so far only the largest companies could afford to create a single page application, but thanks to innovative React, Angular or Vue frameworks the technology is more often used.