arrow for title

SPA: server-side rendering, do you really need it?

12 Sep, 2019 Development
SPA: server-side rendering, do you really need it?

Let's talk about SPA and server-side rendering: in the background of the frontend development world since forever, but with good perspectives for the future.

Before the arrival of dynamic web pages generated in Javascript, a static HTML, processed by server-side languages like PHP, Python, Ruby, etc., used to be served in response to an HTTP call.

At 20tab we develop web applications in Python using Django, which suits both the back-end part and the frontend one very well.

However, over the last few years, thanks to AJAX technology and to the success of new front-end development tools, web pages have become increasingly complex, thus favouring the creation of applications which don’t need a page refresh at the end of every new request: we are talking about Single Page Applications, often abbreviated as SPA.

What is a SPA?

An SPA is a website which the user can interact dynamically with by modifying the page he/she is visiting without having to ask the server for the entire rendering of a new page.

This approach allows the user to have a surfing experience similar to that of desktop applications: hence the name web application.

Below follows a list of the most used libraries and frameworks for SPA development.

Number of websites developed

websites developedUsage percentages among Javascripts developers

percentage of Javascript developers

Sources
https://www.lambdatest.com/blog/top-javascript-frameworks-for-2019/
https://2018.stateofjs.com/front-end-frameworks/overview/

Pros and cons of a SPA

Benefits

Disadvantages

How is the first page served?

Here is an example of showing how a web application is served to the client:

code

The page contains the essential tags in the <head> section.

Conversely, there is often a node without any content with an associated ID in the <body>. The file generated by a SPA (bundle.js) creates the page content dynamically, by exploiting that very element.

However, this could be a problem if one of the strengths of our application has to be related to indexation on search engines. Let’s analyse Google in particular.

Google crawlers

When Google crawlers scan a site, they delay the execution of Javascript to a later time when all the resources of the page are available.

This leads to two phases of indexation:

google crawlers

Javascript is executed only during the second crawling cycle, with the purpose of seeing the contents which depend on it. If the content of your application changes very frequently or if it is just very complex, you might want to be sure that your contents are already available during the first stage of indexation.

TIP - Here you have a useful link to help you check how the search engine processes a web application before indexing it: https://search.google.com/test/mobile-friendly

Google has also recently announced an update to Chromium, the rendering engine used by crawlers to scan websites.

"Today, we are happy to announce that Googlebot now runs the latest Chromium rendering engine (74 at the time of this post) when rendering pages for Search.” - 7 May 2019

Link to the article: https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html

Hybrid approach

Before analysing server-side rendering, let’s briefly see an example that could be defined as hybrid.

In order to ensure that the pages of our application can be shared on social media - which, unlike Google, do not perform the second rendering cycle - certain template systems (such as Handlebars, Twig, etc…) are often used so as to serve the meta of the page server-side.

code

At 20tab we have used this kind of approach for a few projects, one in particular one: Pasupi - Food delivery finder, a search engine for home-delivery restaurants and pubs.

Isolation between back-end (Python/Django) and front-end (React) made it easy for us to develop the application, which is compatible with android and iOS and has been developed with React Native and the back-end APIs.

SPA server-side rendering

Server-side rendering (also known as SSR) is the ability of a Javascript application to render the page server-side, rather than in the user’s browser.

Benefits

Disadvantages

SSR tools

ssr tools

Conclusions

The development and maintenance cost of an isomorphic application (SPA + SSR) can be really high and does not always gives the expected results.

In addition, server side rendering has always been overshadowed in the world of front-end development and has never received the right push from companies dealing with the development of libraries or frameworks.

As for what concerns the SEO part, search engines are becoming increasingly updated and are going in the direction of single page applications.

I will leave you with a tweet from Dan Abramov, one of the developers working on the React team, that gives us high hopes for the future support of server-side rendering.
 

dan abramov tweet

Carmelo Catalfamo

Blog

You may also be interested:

contact us

You have a good idea but you don't know which way to turn?

Tell us about your project