C’est un fait : les applications web évoluent en permanence. Les technologies qui les composent ne cessent d’être mises à jour, de nouveaux frameworks et librairies sortant toutes les semaines. Les Single Page Applications (SPA) sont donc aujourd’hui très fréquentes. Tout le monde peut trouver son bonheur dans les SPA – des petites entreprises, startups et PME, aux plus grandes entreprises telles que Facebook, Microsoft, Netflix.

Les principales technologies permettant aujourd’hui la réalisation de SPA sont Angular, React et VueJS, toutes présentant des avantages et inconvénients, mais toutes présentant au moins un enjeu commun : la SEO.

SEO…quésaco ?

La Search Engine Optimisation représente l’ensemble des pratiques permettant d’activer et d’optimiser naturellement le référencement d’un site internet. Il y a deux sortes de référencement possibles : le référencement payant (SEA) et le référencement naturel (SEO).

Le terme « référencement payant » est plutôt évocateur : vous investissez de l’argent afin d’être plus visible. Il s’agit purement de marketing. A contrario, le référencement naturel est gratuit, reposant sur des principes simples mais souvent difficiles à mettre en place. Il est pourtant le référencement le plus rentable (plutôt évident puisque l’on parle de gratuité), mais c’est un fait assuré que je vous confirme ici : il est effectivement possible de positionner son site web en tête des recherches Google… sans débourser un seul centime.

Le référencement naturel se base sur de nombreux paramètres, mais c’est sur le contenu que nous allons nous concentrer dans cet article. Afin de référencer votre site, un moteur de recherche doit en comprendre son contenu. Lors d’une requête, il va parser ce contenu, l’analyser et déterminer le sujet de votre page. Puis, en fonction de la puissance de votre page sur un sujet donné, vous remonterez dans les moteurs de recherche sur la thématique concernée.

La problématique des Single-Page Applications

On l’a vu, la SEO repose en grande partie sur le parsing du contenu de la page. Avez-vous déjà essayé de regarder la source d’une page Angular ou React normalement compilée ? Le constat est là : on trouve plus de contenu dans un désert.

Le principe des SPA repose en effet sur une exécution pure Javascript. Le client reçoit une page vide de contenu, mais contenant des scripts Javascript qui permettront à la page de se charger et d’afficher le contenu demandé. Du coup, le contenu de la page renvoyé par le serveur vers le client lors d’une requête, n’est constitué que d’un header quasi-vide, un main contenant une simple balise à laquelle l’application Javascript va s’accrocher, et quelques scripts Javascript contenant l’application.

Comme évoqué dans la section précédente, le problème est donc plutôt simple à identifier : pas de contenu = pas de référencement naturel (ce qu’aucun client ne souhaite).

Le Server-Side Rendering

Le Server-Side Rendering (SSR), comme son nom l’indique, consiste à générer le HTML complet de la page initiale demandée par un client côté serveur, et de l’envoyer avec l’intégralité de son contenu généré.

Normalement, cela n’aurait l’air de rien, on émule simplement un fonctionnement de serveur web classique : « je demande un contenu, je l’obtiens ». Cependant, on est capable d’émuler ce système tout en gardant la facilité et la rapidité de développement du framework/librairie de SPA que l’on utilise. Toutes les technologies de SPA modernes possèdent aujourd’hui un système de Server-Side Rendering. Les concepts et la mise en place varient selon les technologies mais le principe reste le même : générer la première page demandée par le client côté Serveur.

Le fonctionnement de l’application une fois chargée chez le client restera exactement le même, le routage et les changements de pages se feront en Javascript, les chargements de contenus se feront en XHR et le client utilisera l’application comme avant. La seule différence résidera dans le chargement de la première page, dont tout le HTML sera envoyé au client comme l’aurait fait une application monolithique.

Le Server-Side Rendering pris en compte, nos problématiques de SEO (évoquées précédemment) peuvent être réglées. Initialement, un moteur de recherche ne faisant que des chargements “initiaux” pour chaque page – sans aller de l’une à l’autre comme un navigateur, il lui était impossible de charger nos contenus et de naviguer de page en page. Mais avec un contenu généré par le serveur, il en est maintenant capable.

Conclusion

Le Server-Side Rendering n’est pas utile dans tous les cas. Cela reste un système parfois lourd à mettre en place, il vaut donc mieux le prévoir dès le début du développement – car certains ajustements sont souvent nécessaires selon la technologie utilisée.

Même si la problématique SEO n’est pas la seule que ce système règle, elle est la principale raison de sa mise en place. Exemple : la SEO n’étant pas utile pour une application d’intranet, le SSR n’est dans ce cas pas du tout nécessaire.

En conclusion, la prochaine fois que quelqu’un vous dit “mieux vaut ne pas utiliser de SPA, car on veut un site bien référencé”, parlez-lui du Server-Side Rendering (SSR). Peut-être qu’il reconsidèrera la question!

©️ Julien Pontillo, Consultant JavaScript Fullstack chez Klanik

 


 

It’s a fact: web applications are constantly evolving. The technologies that compose them are constantly being updated, with new frameworks and libraries coming out every week. Single Page Applications (SPA) are now commonplace. Everyone can find their happiness in SPAs – from small companies, startups and SMEs, to the largest companies such as Facebook, Microsoft, Netflix.

The main technologies allowing today the realization of SPA are Angular, React and VueJS, all of them having advantages and disadvantages, but all of them having at least one common issue: SEO.

SEO…What is it?

Search Engine Optimization is the set of practices to activate and naturally optimize the SEO of a website. There are two kinds of SEO: paid search engine optimization (SEA) and natural search engine optimization (SEO).

The term « paid search » is rather evocative: you invest money to be more visible. It is purely marketing. On the contrary, natural referencing is free, based on simple principles but often difficult to implement. It is however the most profitable SEO (rather obvious since it is free), but it is an assured fact that I confirm here: it is indeed possible to position your website at the top of Google searches … without paying a single cent.

SEO is based on many parameters, but it is on the content that we will focus in this article. In order to reference your site, a search engine must understand its content. During a query, it will parse this content, analyze it and determine the subject of your page. Then, according to the power of your page on a given subject, you will go up in the search engines on the concerned theme.

THE PROBLEM OF SINGLE-PAGE APPLICATIONS

As we have seen, SEO is largely based on parsing the content of the page. Have you ever tried to look at the source of a normally compiled Angular or React page? The observation is there: we find more content in a desert.

The principle of SPA is based on a pure Javascript execution. The client receives a page empty of content, but containing Javascript scripts that will allow the page to load and display the requested content. As a result, the content of the page returned by the server to the client during a request, consists only of a quasi-empty header, a main containing a simple tag to which the Javascript application will be hooked, and some Javascript scripts containing the application.

As mentioned in the previous section, the problem is quite simple to identify: no content = no SEO (which no client wants).

Server-Side Rendering

Server-Side Rendering (SSR), as its name suggests, consists of generating the full HTML of the initial page requested by a client on the server side, and sending it with all of its generated content.

Normally, this would look like nothing, it simply emulates a classic web server operation: « I request content, I get it ». However, we are able to emulate this system while keeping the ease and speed of development of the SPA framework/library that we use. All modern SPA technologies today have a Server-Side Rendering system. The concepts and the implementation vary according to the technologies but the principle remains the same: to generate the first page requested by the client on the Server side.

Once the application is loaded on the client side, the routing and the page changes will be done in Javascript, the content loading will be done in XHR and the client will use the application as before. The only difference will be the loading of the first page, where all the HTML will be sent to the client as a monolithic application would have done.

With Server-Side Rendering taken into account, our SEO issues (mentioned earlier) can be solved. Initially, since a search engine only did « initial » loads for each page – without going from one to the other like a browser, it was impossible for it to load our content and navigate from page to page. But with server-generated content, it is now able to do so.

Conclusion

Server-Side Rendering is not useful in all cases. It remains a heavy system to set up, so it is better to plan it from the beginning of the development – because some adjustments are often necessary depending on the technology used.

Even if the SEO problem is not the only one that this system solves, it is the main reason for its implementation. For example, since SEO is not useful for an intranet application, SSR is not necessary at all.

In conclusion, the next time someone tells you « it’s better not to use SPA, because we want a well referenced site », tell him about Server-Side Rendering (SSR). Maybe they will reconsider!

©️ Julien Pontillo, Consultant JavaScript Fullstack chez Klanik