Générer un site statique, dynamiquement

Retour d’expérience avec Nuxt 3, Netlify & Puppeteer

Nico Prat

Published in

nicooprat

5 min readSep 23, 2022

TL;DR

Créer un script Puppeteer pour scraper et enregistrer les données dans des fichiers JSON
Utiliser Nuxt pour développer puis générer un site en les important
Déployer automatiquement chez Netlify, avec un CRON hebdomadaire

Il y a quelques années…

J’avais décidé de “scraper” différents réseaux sociaux que j’utilise pour maintenir automatiquement mon site perso à jour. Tous ne proposaient pas d’API, ou bien elles étaient trop compliquées, et ça m’a paru une solution plus simple, notamment grâce à Apify qui permet d’abstraire une partie du travail. C’était aussi l’occasion d’essayer de nouvelles technologies, même si ça en jette moins que OAuth ou GraphQL 😬

Cela dit, le “scraping” fait partie de ces outils généralement simples à mettre en place, mais coûteux à maintenir, et il a bien sûr fallu régulièrement régler des problèmes de mise à jour : le code de ces sites changent, et les règles que j’ai utilisées étaient obsolètes.

A ce problème s’ajoute la difficulté de contrôler quand est-ce qu’il y a un problème, et quel est ce problème. Comme beaucoup d’outil SaaS, Apify est pratique quand tout fonctionne, moins quand il faut débugger et sortir des sentiers battus : j’avais programmé le déploiement chaque semaine, et les données étaient parfois incomplètes, voire complètement manquantes. Le site était alors partiellement vide ou indisponible, et il était difficile d’annuler le déploiement, et encore mieux d’en être alerté.

Cette fois j’ai tenté de simplifier la situation tout en conservant le même fonctionnement.

🔎 Scraper avec Puppeteer

Malgré un nom toujours aussi difficile à écrire correctement (ce n’est pas pour rien que le site officiel est https://pptr.dev/ je suppose), Puppeteer reste l’outil de prédilection pour “scraper”, en permettant de contrôler un navigateur de manière programmatique.

En l’utilisant directement, sans passer par Apify, ce qu’on perd en outillage et en écosystème, on le gagne en simplicité d’usage et en contrôle. L’arrêt de la fonctionnalité de streaming d’Apify, qui restait une bonne option pour débugger, m’a définitivement convaincu de changer mon fusil d’épaule.

Crawlee est la librairie de scrapping open-source proposée par Apify

Ces derniers ont d’ailleurs récemment annoncé leur nouvel outil open-source Crawlee qui permet d’utiliser leurs technologies (retries, proxies automatiques, queuing, crawling…) sans passer par leur service. Après quelques essais je me suis rendu compte que ça ne m’était de toute façon pas nécessaire tant mon cas d’usage est simple. Exemple raccourci :

import { writeFile } from 'fs/promises'
import { launch } from 'puppeteer';(async () => {
  const browser = await launch()
  const page = await browser.newPage()  await page.setViewport({
    width: 800,
    height: 600,
  })  await page.goto('https://mobile.twitter.com/')  await page.waitForSelector('article')  const tweets = await page.$$eval('article', (els) => {
    return { ... } // Map elements
  })  await writeFile(
    './storage/twitter.json',
    JSON.stringify({ tweets }),
  )  browser.close()
})()

J’ai donc décidé d’être pragmatique et d’écrire un seul script qui “scrap” les sites un par un, puis enregistre les données au format JSON. De cette façon, on peut ensuite les importer comme n’importe quel autre fichier, parfait pour une génération de site statique ; on y gagne même un typage Typescript automatique, plus besoin de maintenir les définitions manuellement.

Typescript déduit automatiquement le typage depuis des données JSON

De cette façon il est aussi plus facile de débugger directement dans le navigateur avec les options launch({ headless: false, devtools: true }) de Puppeteer. Enfin, on contrôle aussi mieux les cas d’erreurs, car le script échoue au moindre problème, et l’ensemble de la chaîne s’arrête : plus de déploiement hasardeux en cas de pépin.

💻 Développer avec Nuxt 3 (RC)

J’ai eu la chance de participer à la conférence VueJS Amsterdam en juin 2022, et beaucoup ont parlé de Nuxt 3. L’expérience développeur avait l’air prometteuse, et j’avais déjà utilisé la version précédente avec plaisir ; c’était donc l’occasion idéale de m’y remettre.

Pour résumer mon expérience, on a vraiment l’impression que tous les aspects du framework ont été modernisés pour faciliter son usage, en plus de conserver ses fonctionnalités phares, avec notamment :

nuxi qui permet d’effectuer les opérations de maintenance facilement
les auto-imports qui accélèrent l’écriture et simplifie le code
le support complet de Typescript qui améliore la robustesse
Vue 3, bien sûr, qui rend le tout plus élégant et moderne

Enfin, je tenais particulièrement à la possibilité de déployer un minimum de Javascript avec la génération “full static” qui est promise depuis longtemps. Malheureusement à l’heure où j’écris ces lignes, c’est encore à améliorer car le build embarque encore ~200kb de JS. Dommage, mais à ce stade il s’agit toujours d’une Release Candidate, patience donc…

J’ai aussi pu jouer un peu avec Nuxt Content, une sorte de CMS uniquement basé sur le système de fichiers (donc sans base de données), qui me paraît très prometteur et dont je parlerais une prochaine fois…

🚀 Déployer avec Netlify

Cela fait maintenant des années que j’utilise exclusivement Netlify pour tous mes projets. C’est une plateforme largement connue désormais, mais je reviens sur les quelques fonctionnalités qui m’ont rendu la vie facile dans mon cas :

déploiement automatique depuis Github : toujours aussi rapide et fiable, avec une configuration en quelques clics
hébergement, HTTPS et DNS managés : une fois mon nom de domaine (Gandi) correctement configuré, tout se déroule chez Netlify
fonctions programmées : depuis peu il est possible d’exécuter des fonctions sur le modèle CRON, parfait pour mon usage
notifications de déploiement personnalisées : permet de recevoir un mail après un build réussi ou échoué, par exemple

Voilà comment déclencher très simplement un déploiement de manière hebdomadaire, qui me notifiera par mail du résultat :

// ./functions/scheduled-webhook.jsmodule.exports.handler = async function(event, context) {
  await fetch('https://api.netlify.com/build_hooks/xxx', {
    method: 'POST',
  });  return {
    statusCode: 200,
  };
};// ./netlify.toml[functions."scheduled-webhook"]
schedule = "@weekly"

Sur ma liste de choses à implémenter à l’avenir, on peut aussi citer :

la fonctionnalité (payante) d’analytics qui propose des données simples mais RGPD-friendly car gérées côté serveur
le plugin Lighthouse qui teste le site à chaque déploiement et affiche les scores directement dans l’interface
le plugin a11y (terrible acronyme pour signifier accessibilité) qui fait la même chose avec Axe, l’outil de diagnostic le plus répandu
la gestion de formulaire ultra simplifiée, parfait pour un site perso

En bref

Pour voir le résultat final, ça se passe ici :
➡️ https://nicooprat.com/

Pour jeter un œil au code, c’est par là :
➡️ https://github.com/nicooprat/nicooprat