Dans nos pérégrinations à la recherche des meilleures solutions entre performances et économies de ressources, nous avons du mettre en place un panier sur un projet réalisé à l’aide de GatsbyJS, quelle solution de panier prendre quand on utilise React ?
Pourquoi réaliser un panier en JavaScript ?
La raison de réaliser un panier en pur JavaScript est que ce contenu n’a pas besoin d’être indexé par un moteur de recherches et donc il est facile de rendre cette partie dynamique sans utiliser de ressources côté serveur. On a alors tous les avantages d’une SPA, sans les contraintes de celle-ci puisque c’est uniquement la partie panier qui est en JavaScript, le reste de la page reste une page classique mais statique (on a les avantages des pages statiques, à savoir performances, économies de ressources, résistance aux attaques)
Un autre avantage est que nous avons accès au LocalStorage et donc il n’est pas nécessaire de stocker le panier du visiteur côté serveur. Si le visiteur efface son cache, il perd effectivement son panier mais c’est un moindre mal.
Il est à noter que dans le LocalStorage, nous ne mettons aucune donnée sensible (pas même les token JWT …) car n’importe qui a accès au LocalStorage. Si ces données sont celles d’un panier, un attaquant n’en fera pas grand chose le cas échéant.
Avec quelle librairie React ?
De notre côté, nos recherches nous ont amené à utiliser react-use-cart. Le projet est un peu vieux mais fait très bien le travail que l’on attend de lui. On peut compter le nombre de produits dans le panier, en ajouter, en supprimer, les mettre à jour
