Utiliser Phaser avec Gatsby : Eviter les erreurs de rendu côté serveur

Gatsby est un outils moderne et formidable pour créer des sites web statiques. Le blog sur lequel vous naviguez actuellement est d'ailleurs créé avec Gatsby.

Gatsby est un SSG, Static Site Generator, c'est à dire qu'il va générer un code HTML statique au moment du build.

On code notre site en utilisant la bibliothèque React, puis le script se charge de transformer tout ça en code HTML/CSS/JS compréhensible pour chaque navigateur, c'est ce qu'on appelle le SSR (server-side rendering, "rendu côté serveur").

Le bénéfice principale de cet approche est d'avoir un gain de performances. Toutefois, il possible que vous rencontriez des erreurs au moment du build. En effet, certaines bibliothèque ne s'éxécutent uniquement côté client, et aura pour effet de stopper le processus de build.

L'une de ces bibliothèques est Phaser, qui est un outil incontournable pour le développement de jeux en HTML5. Phaser n'étant disponible qu'au moment où la page est rendue côté client, des erreurs arriveront lors de la phase de build du site.

Heureusement, il existe une solution plutôt simple pour résoudre ce problème !

Solution

Pour résoudre ce problème, il suffit d'utiliser une importation dynamique dans un hook useEffect de React. Cela permet de ne charger Phaser que lorsque le composant est monté, et donc disponible côté client.

Pour vous aider à y voir plus clair, je vous propose un petit bout de code :

import React, { useEffect, useState } from 'react'const Game = () => {  const [phaser, setPhaser] = useState(null)  useEffect(() => {    import('phaser').then((Phaser) => {      setPhaser(Phaser)    })  }, [])  if (!phaser) {    return <div>Chargement de Phaser...</div>  }  return <div>Phaser est prêt à être utilisé!</div>}export default Game

En utilisant cette approche, vous pourrez éviter les erreurs de rendu côté serveur avec Phaser et Gatsby. Garder, en tête que Phaser n'est bien évidemment pas la seule bibliothèque "client only", et par conséquent vous pourrez appliquer la même technique si un problème simialire survient sur votre projet.

Conclusion

En conclusion, en utilisant une importation dynamique dans un useEffect de React, vous pourrez facilement utiliser une bibliothque "client-only" sans rencontrer des erreurs de rendu côté serveur.

Pour finir, je vous invite à essayer Phaser qui est vraiment une bonne petite bibliothèque de développement de jeux !