Rendu statique de votre application React avec React-Static

C’est toujours un peu la merde dès lors que l’on cherche à utiliser React pour une application couplée à un site vitrine sans entrer dans le monde joyeux du SSR. Les moteurs de recherche ont beau nous annoncer qu’ils supportent Javascript, vous aurez souvent un soucis dès qu’il s’agit d’aller fetch des données pour les afficher.

Résultat, votre référencement va en prendre un coup, votre consultant SEO va tirer la tronche, votre CMO va vous regarder d’un oeil mauvais, et vous aurez bien les boules après ces longs mois passés à développer une app trop de la boulette que personne ne trouve en tapant « trop de la boulette » sur Qwant, Google ou euh… Bing ? (Sérieusement ? Bing ?? Autant écrire Yahoo tant qu’on y est !)

Pourtant tout n’est pain perdu. On peut développer des applications front-end avec React en restant copain avec tous ces gens.

Tiens, prenons WordPress.

Imaginons que vous souhaitiez utiliser le back de WordPress (et son interface d’administration ma foi parfaite), mais que vous souhaitiez utiliser React pour le rendu côté client en utilisant l’API Rest. 

Ca vous semble tordu ? Vraiment ?

Pourtant c’est beaucoup plus répandu qu’on ne pourrait le croire et vous devriez y réfléchir à deux fois avant de vous lancer dans le développement back si vous avez simplement à réaliser un site web plutôt classique, un blog ou un portfolio que vous souhaitez administrer facilement.

Pour lister les posts de mon blog avec l’API Rest, il suffit de taper sur cette url :

http://www.babonaux.com/wp-json/wp/v2/posts

J’ai alors un bon gros JSON qui liste mes derniers posts. Ce que je veux, maintenant, c’est développer une application React qui va notamment consommer cette API et – surtout, rester SEO Friendly.

React Static to the rescue

Il existe un paquet de solutions qui permettent de générer du contenu statique à partir d’une application front, Gatsby en tête de gondole. On va ici s’intéresser à React Static, qui entre dans la même catégorie qu’un Create React App, mais qui apporte des mécanismes pour générer le contenu statique de votre application de façon quasi automatique.

On commence par installer le bousin globalement :

yarn global add react-static

On créé ensuite notre app en sélectionnant un template (en choisira basic pour notre démo, mais on pourrait utiliser le template Redux, Apollo ou même Algolia) :

react-static create

Une fois que vous avez créé votre app, ça fonctionne comme un CRA, vous lancez un yarn start et votre serveur de dev est lancé. Rien de bien folichon jusqu’ici mais on va modifier un peu le code pour taper sur les articles de mon blog.

A la racine, ouvrez static.config.js

Vous vous retrouvez dans la configuration de votre application, plus spécifiquement dans la configuration des routes de votre application. React Static va utiliser ce fichier de conf pour savoir quoi crawler et où aller choper les données.

On défini les path et les routes enfants afin de créer notre arborescence. Par exemple /blog va avoir un segment supplémentaire /post/:id qui correspondra au détail de notre article.

Remplacer ceci :

const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
Par cela :
const { data: posts } = await axios.get('http://www.babonaux.com/wp-json/wp/v2/posts')
Editez src/containers/Blog.js, on va juste éditer une ligne pour être en conformité avec le json de mon blog :
<Link to={`/blog/post/${post.id}/`}>{post.title.rendered}</Link>
Editez maintenant src/containers/Post.js :
export default withRouteData(({ post }) => (

<div>

    <Linkto="/blog/">{'<'} Back</Link>

    <br/>

    <h3>{post.title.rendered}</h3>

    <p dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

  </div>

))

Notez la props dangerouslySetInnerHTML. C’est nécessaire pour que le code HTML soit bien interprété par React. Attention par contre, si une balise HTML est pétée dans le code que vous importez, vous péter de facto votre application.

On sauvegarde tout ça et on va maintenant s’intéresser au coeur de React Static, c’est à dire – vous l’aurez deviné, la possibilité de programmer une cafetière pour cuire des toasts à distance sur un robot aspirateur en lévitation au dessus d’une chèvre.

Logique.

Contenu statique

Pour générer du contenu statique, il suffit de faire un petit :
yarn build
React Static va analyser votre fichier de conf et tracker tous les liens pour récupérer le contenu. Une fois que c’est fait, vous devriez avoir une arbo comme celle ci dans /dist :
Jetez un oeil aux fichiers .html produits dans votre dossier dist.
Ouaip, c’est bien ce que vous pensez.
React Static a généré un fichier HTML tout ce qu’il y a de plus classique, ce qui a un double avantage :
– L’optimisation SEO comme on l’a indiqué depuis le début
– Mais aussi un temps de chargement de ouf.
Tentez un petit serve depuis la racine de votre application pour valider tout ça :
yarn serve

Youpi !

Il existe moultes configurations. Vous pouvez notamment gérer la pagination, modifier le template HTML de base, intégrer Redux ou encore faire évoluer votre configuration webpack à travers le fichier de conf de React Static sans avoir à « ejecter », (non, ce n’est pas sale). Et rien ne vous empêche de gérer une partie avec du rendu statique, et une autre partie de façon plus traditionnelle avec du Redux-Saga et compagnie.

And now ?

La beauté du truc, c’est que vous n’avez plus qu’à déposer le contenu de votre dossier dist sur votre hébergement ou sur un bucket AWS S3 configuré en hébergement de site web statique.
Mais que se passerait-il donc si on ajoutait un article à notre blog alors qu’on a déjà build et déployé notre app ?
Hein ?
Que se passerait-il ?
C’est là où ça devient un peu plus touchy. Etant donné qu’on cherche à générer du contenu statique, il y a peu de place pour importer dynamiquement du contenu SEO friendly à moins de refaire systématiquement un build et un déploiement. Quelque part, le « Static » dans React Static n’est pas là pour rien.
Fondamentalement on se taperait donc un process complètement overkill. Imaginez que vous éditiez plusieurs posts dans la journée, à moins de scripter quelque chose pour regénérer le contenu à chaque création, suppression et édition de posts, de commentaires, de pages, vous vous tireriez rapidement une balle.
Ce n’est pas infaisable, c’est juste bien loin du fun et du côté pratique qu’on imaginait au début.
Si on entrait dans ce type de besoin, ce qu’il nous faudrait plutôt, c’est un service qui s’occupe de générer le contenu statique pour nous en analysant si notre contenu existe, s’il a été modifié, s’il a été supprimé… On se tournerait alors vers quelque chose comme Prerender.io, qui permet d’aller bien plus loin dans la génération de pages statiques en s’intégrant comme un middleware.
Bref, les solutions comme React Static sont très pratiques quand vous voulez générer du contenu statique à partir d’une app développée avec React, Angular, Vue et compagnie. Ca s’intègre bien dans un pipeline d’intégration continue, ce qui permet de générer le contenu à la volée et de le déployer à chaque fois que nécessaire. Mais si votre besoin consiste à générer des pages statiques à la volée en fonction des modifications faites côté back, et que celles ci sont régulières, passez votre chemin et tournez vous plutôt vers du Server Side Rendering ou une solution comme Prerender.io

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *