De nos jours, les cas d’utilisation d’une SPA sont de plus en plus rares. La majorité des méta-frameworks modernes proposent des solutions hybrides qui combinent le SSR (Server-Side Rendering), le SSG (Static Site Generation) et l’hydratation afin de tirer parti des avantages de chaque approche.

Ceci étant dit, il existe encore certaines situations où une SPA est nécessaire, ainsi que d’anciens projets nécessitant désormais une meilleure optimisation pour le SEO. Bien que les crawlers modernes exécutent le JavaScript d’une page, la réalité est qu’il est plus difficile d’obtenir un bon classement avec une SPA.

Au-delà des conseils génériques, comme l’amélioration de la vitesse de chargement ou la mise en place d’un budget JavaScript, nous allons présenter deux solutions concrètes pour optimiser les performances SEO d’une SPA.

⚠️ Gardez à l’esprit que ces techniques doivent être utilisées en dernier recours, car elles augmentent la complexité de l’infrastructure et rendent la maintenance plus difficile.

Architecture Infonuagique

Bien qu’AWS ait récemment tenté de promouvoir l’utilisation d’Amplify pour l’hébergement de contenu statique, la solution historiquement la plus optimale pour héberger une SPA reste la combinaison de CloudFront et S3.

Étant donné qu’une SPA est constituée uniquement de fichiers statiques, sa mise en ligne ne nécessite ni serveur web (e.g. NGINX) ni backend dédié (e.g. Node.js). Cette approche permet un hébergement à coût minimal tout en offrant une grande élasticité en cas de pic de trafic.

Les étapes importantes pour charger une SPA sont résumées dans le diagramme ci-dessus. À noter que :

• Les requêtes à S3 sont, dans la majorité des cas, non nécessaires grâce à la mise en cache par CloudFront.
• La section JavaScript ⚙️ est fortement abrégée. En réalité, elle inclut des appels réseau pour récupérer les fichiers JavaScript, leur interprétation par le navigateur web, ainsi que leur exécution. C’est généralement cette étape qui est responsable de la plupart des problèmes de performance liés aux SPA.

Injection de métadonnées

Commençons avec un cas d’utilisation très simple : une SPA qui affiche différents films en fonction de leur identifiant unique, comme cet exemple.

Sans grande surprise, la réponse initiale de CloudFront est un fichier HTML presque vide.

Supposons maintenant que les performances de cette page web sont extrêmement optimisées et que le budget JavaScript des robots de Google et des autres moteurs de recherche est suffisant pour bien indexer le site.

Il demeure néanmoins un problème important : l’absence de métadonnées ! En effet, lorsque la page est partagée à travers différents canaux (Slack, Messenger, LinkedIn, etc.), aucune prévisualisation du contenu n’est disponible.

Pour pallier ce problème, nous allons utiliser une fonction Lambda@Edge pour intercepter les requêtes entre CloudFront et S3 et injecter nous-mêmes les métadonnées !

Bien que cette approche puisse sembler intimidante, elle est en réalité simple à mettre en place. En seulement quelques heures de travail, les pages publiques de votre SPA afficheront une prévisualisation !

Au niveau du code, au plus une centaine de lignes sont nécessaires.

Au niveau des performances, bien qu’il soit vrai que cette approche ait un impact négatif, celui-ci est marginal et n’est présent que lorsque le résultat n’est pas en cache !

Rendu Dynamique

Cette approche consiste à servir un contenu différent aux humains et aux robots. Alors que les humains interagiront avec la version originale de la SPA, les robots recevront une version pré-rendue de la page. Comme mentionné au début de cet article et dans la documentation de Google, cette approche ne devrait être utilisée qu’en dernier recours !

Mise en place de l’engin de rendu

La première étape consiste à mettre en place un outil capable de préparer les versions complètes des différentes pages. Deux solutions possibles sont :

• Prerender.io : un produit commercial spécialisé dans l’optimisation des SPA.
• Rendertron : une solution open source créée par Google pour l’optimisation des SPA. À noter que, même si le projet n’est plus activement maintenu, sa logique essentielle reste relativement simple et facile à s’approprier. De plus, des images Docker du projet existent, et il est facile de mettre en place sa propre instance de Rendertron en quelques minutes.

Détection des robots

L’étape suivante consiste à détecter les robots et à les rediriger vers le moteur de pré-rendu. Comme nous sommes dans l’écosystème AWS, nous allons utiliser une fonction CloudFront (un produit similaire à Lambda@Edge, mais l’explication de leurs différences dépasse le cadre de cet article).

Modification des règles de la cache

L’ajout de l’en-tête x-bot est crucial, car il est utilisé par CloudFront comme clé pour la cache. Cela permet à CloudFront de stocker en cache deux versions différentes de la même page, en fonction du type d’utilisateur (humain ou robot).

Solution complète

Affichage Humain 👨‍💼

Affichage Robot 🤖

Conclusion

Nous avons présenté deux techniques différentes pour optimiser les performances SEO d’une SPA hébergée dans l’écosystème AWS. Comme mentionné à plusieurs reprises, ces techniques ne devraient être utilisées qu’en dernier recours !

Cela étant dit, ces approches sont rapides et relativement peu coûteuses à mettre en place. Elles peuvent parfois servir de bouée de sauvetage pour d’anciens projets nécessitant du SEO ou même pour des projets récents ayant des contraintes techniques plus spécifiques !