Peut-on éviter le rechargement total de la page d'un site web lors du passage d'une page à l'autre ?

Oui, cela s'appelle une Single Page Application (SPA) site monopage en français. Mais cela ne veut pas dire que votre site n'aura qu'une page ! En effet, un site SPA peut simuler un site multipage tout en ayant techniquement une seule page.

L'avantage d'une SPA réside dans l'expérience utilisateur : pas de chargement de page donc fini le clignotement au changement de page. Sur ce genre de site le taux de rebonds est bien moindre que sur un site classique.

Pour faire une SPA, il y a 2 solutions : soit on charge tout le site au début de la connexion, soit on charge une partie du site et ensuite on fait des échanges asynchrones avec le serveur (on appelle cela de l'ajax) pour charger silencieusement ce que l'utilisateur veut.

Evidemment il y a un hic !

Charger tout le site d'un coup au démarrage, cela pénalise la première impression de l'utilisateur.

Faire de l'ajax partout, c'est écrire un code spagetti peu maintenable.

En fait, il existe 2 cas de figure :

1. La solution facile : le site est petit

Le développeur web charge tout le site sur une page et les différentes sections sont atteintes par scroll. Un exemple : http://bessieres.biz/.

Avantages : c'est simple à réaliser.

Inconvénients :

- Vous n'avez qu'une seule page d'un point de vue SEO, c'est limité.

- Vous devez charger pas mal de choses au démarrage ce qui pénalise la rapidité du site (donc son SEO et l'expérience utilisateur). C'est tout simplement impossible pour les gros sites ou applications.

- La navigation avec le bouton 'back' du navigateur ne marche pas.

2. La solution propre

Une SPA fait appel au serveur de façon asynchrone, en ajax ou via des sockets bidirectionnelles. Les échanges sont invisibles pour l'utilisateur. Les techniques ont progressé et les frameworks comme Angular.js ou React.js permettent de faire des appels asynchrones sans surcharger le code. Des applications entières peuvent ainsi être développées sur une page alors qu'auparavant seuls quelques appels étaient faits en ajax et le code était difficilement maintenable. Les pages sont générées côté serveur et envoyées côté client puis communiquent par échanges asynchrones.

Avantages : une rapidité d'exécution exceptionelle et le code est maintenable pour des grosses applications.

Inconvénients : Le coût ! Ce système pose différents problèmes que les développeurs web résolvent en utilisant un panel de techniques complexes.  Par exemple l'historique de navigation : le navigateur ne peut enregistrer l'historique des pages chargées en ajax et pour que le bouton 'retour en arrière' fonctionne il faut mettre en oeuvre différentes techniques.

Un exemple : https://www.faber.place/

Crédit photo : Paul Smith