This article сovers the main questions: Why the development of isomorphic applications is getting more and more popular? What is the advantage of a single page application on React JS as compared to other SPA types? How does isomorphic React help create SEO-friendly SPAs? And why do many developers and businesses prefer ?
The Old and The New Web
At the dawn of web technologies, a typical site looked as a set of static HTML pages. The old web worked in such a way that the browser needed to request each page of the website separately, forcing the server to generate HTML pages and send them back. Therefore each new request to the server was followed by the endless reload of pages.
The New Web and The Introduction of Single Page Applications (SPA)
As the technologies evolved, all server operations started to be made on the fly, and website pages began to refresh instantly in the web browser. A single page app (SPA) that consists of one HTML page wrapper with dynamically loaded content became popular. Gmail or social nets where switching between the tabs happens almost instantly, without any page reload, can be an excellent example of a single page application.
As well as any other site, a single page app consists of the server side and the client side. The client side is written on JavaScript, whilst the server side can be written on PHP, Node.js, Python, Java or any other suitable server language. The client side contains all logic of a single page app (views, templates, controllers, models, and so forth). So, when the user loads the website he sees only the client side of the app. When you click on another tab or page of the website, the client side contacts the server through the API, the server gives data and the user sees the newly rendered part of the HTML page.
That creates direct benefit both to the user and to the . The user can quickly switch between the tabs or pages without page reload and even work with the app offline. The developers have an opportunity to create an application, distinctly dividing tasks to the client side and server side, which prevents them from duplicating too much of the app logic between the two environments written in different languages.
Single Page Applications: Pros and Cons
The pros of SPA development, as with any client-server apps, are that there is a division into the client and the server sides, which can be developed, if necessary, by separate teams. In case it is required to change the application interface, there’s no need to make amendments to the business logic, or vice versa.
One more advantage of single page apps lies in their high load speed. As a result, we get a beautiful, cutting-edge and super fast web application that updates without page reload.
But, on the other hand, all efforts can be nullified because of the following critical shortcomings:
-
Seach engine optimization of single page apps
Originally SPAs are not suitable for SEO needs. Since a single page application loads data dynamically and creates a markup, usually search robots can’t see and index such content. As a result, a single page app is indexed as an empty page. Therefore programmers should additionally create separate pages (more often html pages) for search bots, and together with the webmaster think over the logic to create a website structure to have such content indexed.
-
Single page apps performance
As far as the the content of a single page application is created dynamically, it is rendered only after the application has completely loaded and initialized. Therefore users can see an empty page or a loading icon within several seconds (unlike traditional HTML pages where the browser renders content as the HTML loads). Especially during the first visit of the site when page resources haven’t been cached yet.
Thus, such a site loses potential clients because these seconds are critical to make a decision: stay or leave the site. For example, Amazon counted that the increase of their pages load by 100 milliseconds automatically lowers their profit by 1%.
-
Single page apps support
Sometimes one and the same actions should be done both on the client, and on the server sides. The simplest example is form validation. Often the client and the server sides are written in different languages, therefore we get two options of the same functionality that have to be supported in parallel. It concerns not only single page apps, but all web applications in general.
How cutting edge technologies help solve these problems?
A Hybrid Approach To SPAs Development, or Isomorphic JavaScript
To adapt single page application for SEO needs and ensure its fast loading and indexing by search engines, the paradigm of development shifted towards isomorphic JavaScript. The isomorphic code is a code which can be executed both on the client and on the server side.
What does it mean in the context of single page applications?
When a website is first opened, all operations are carried out on the server and the browser gets an HTML with all information (same as with typical websites with static pages which search engines can index). After JS is loaded the web turns into a “single page app” and works respectively.
The most exemplary isomorphic applications are well known Facebook, Instagram, Flickr, Airbnb, etc.
Different libraries are applied to develop isomorphic apps, for example, of Meteor, by Derby or React JS. Let’s have a deeper insight into React JS.
The Benefits of Isomorphic React JS for SPAs
-
Benefits for SEO and marketing
Isomorphic React JS gives two main advantages to you and your single page app user:
- it is simpler for search bots to look through and index pages of the site
- improved user experience from interaction with your React website
The isomorphic app on React is a single page app that can be rendered on the server. The sense of server rendering is that you can show static pages like index.html, page1.html, page2.html files, etc. for the clients that support or partially support JavaScript (for example, to search engine bots). Besides, isomorphic React increases application load speed and allows users see information on the page faster, as soon as a newly rendered part of the page is uploaded.
When the website loads fast, the user experience factors improve: in simple words, users are more loyal and stay longer on the website. Nowadays behavioural factors make one of the most important Google ranking factors. They are more important than, for example, keyword density.
-
Benefits for developers
React is the library that can render site components both on the server and on the client sides. React is excellent for building isomorphic apps since it allows to reuse almost (depending on the applcation scale) to render it on the server side. For this reason, many developers choose React for their projects.
Non-isomorphic apps do not allow this because of their architecture. If the client part is written on JavaScript, and the backend on PHP, we can’t reuse the client side code for the server side, and vice versa. In the case with JavaScript, the client code often depends on the browser DOM, that is not available on the server side. React gives us an abstract of the DOM browser in the form of a virtual DOM. Tha gives two main advantages:
- Code that works with virtual DOM in React doesn’t depend on the browser and can be carried out on the server.
- React can optimize operations with documents and reduce the number of connections to the browser DOM and, as a result, considerably speed up frontend operations.
Conclusion
Should you consider React for your future apps? Of course, you should. Especially if you need to develop a quality single page app and in the shortest time and make it fast, lightweight, user-friendly and easily accessible for indexing by search engines. The isomorphic single page app on React is an excellent option for developers, customers, and your app users too. However, you should remember that React is not not a panacea for all problems. You should consider the specifics of each project to make sure that the selected model is optimal in your case.