Comment ajouter une recherche à votre site web sans backend
Vous avez créé un site statique ou une application JAMstack. C’est rapide, peu coûteux à héberger et simple à maintenir. Mais maintenant, vos utilisateurs souhaitent une fonctionnalité de recherche, et vous vous demandez : dois-je vraiment mettre en place un serveur ou une base de données juste pour cela ?
La réponse courte est non. Les approches modernes vous permettent d’implémenter une recherche côté client sans infrastructure backend tout en gardant votre site entièrement statique. Ce guide couvre trois options pratiques : la recherche pour sites statiques avec Pagefind, les bibliothèques JavaScript dans le navigateur, et les solutions d’API de recherche hébergées.
Points clés à retenir
- La recherche sur site statique ne nécessite aucun serveur d’exécution — les index sont livrés sous forme de fichiers statiques aux côtés de votre HTML
- Pagefind est la solution par défaut moderne pour la plupart des sites statiques, utilisant des index fragmentés et des Web Workers pour des performances efficaces
- Les bibliothèques dans le navigateur comme Lunr.js et Fuse.js fonctionnent bien pour les petits sites mais rencontrent des difficultés avec les index volumineux
- Les API de recherche hébergées offrent des fonctionnalités avancées au prix de considérations tarifaires, de confidentialité et de dépendance vis-à-vis d’un fournisseur
Ce que signifie réellement « sans backend »
Lorsque nous parlons de recherche sur site statique ou de recherche côté client sans backend, nous voulons dire qu’il n’y a pas de serveur d’exécution que vous devez maintenir. Votre site reste une collection de fichiers statiques servis depuis un CDN ou un hébergement simple.
Cependant, la plupart des approches nécessitent toujours une étape de build. Lors du déploiement, vous générez un index de recherche à partir de votre contenu. Cet index est livré sous forme de fichiers statiques aux côtés de votre HTML — aucun serveur ne traite les requêtes à l’exécution.
La recherche s’effectue soit entièrement dans le navigateur de l’utilisateur, soit via des appels API vers un service tiers géré.
Pagefind : la solution moderne par défaut pour les sites statiques
Pagefind est devenu la solution de recherche de référence pour les sites statiques. Il s’exécute après la construction de votre site, parcourt votre HTML et génère un index de recherche fragmenté.
Comment fonctionne Pagefind
Contrairement aux outils plus anciens qui créent un seul fichier d’index volumineux, Pagefind divise l’index en fragments. Lorsque les utilisateurs effectuent une recherche, leur navigateur ne télécharge que les fragments pertinents via des Web Workers. Cela maintient les chargements de page initiaux rapides tout en prenant en charge des sites comportant des milliers de pages.
Pagefind inclut des composants d’interface prêts à l’emploi, gère bien le contenu multilingue et fonctionne avec n’importe quel générateur de site statique — Hugo, Eleventy, Astro ou HTML simple.
Quand choisir Pagefind
Pagefind convient bien à la plupart des sites statiques. Il gère les sites de documentation, les blogs et les pages marketing sans complications de configuration. Le compromis est l’étape de build : votre pipeline CI doit exécuter Pagefind après avoir généré le HTML.
Pour les sites comportant plusieurs milliers de pages, Pagefind offre généralement de bonnes performances avec des tailles d’index gérables.
Bibliothèques côté client : Lunr, Fuse et leurs limites
Avant Pagefind, les développeurs se tournaient souvent vers des bibliothèques comme Lunr.js ou Fuse.js. Elles fonctionnent toujours mais comportent des contraintes réalistes.
Le problème de la taille de l’index
Ces bibliothèques nécessitent de charger l’intégralité de l’index de recherche en mémoire du navigateur. Pour un petit blog, ce n’est pas un problème — peut-être 50 Ko. Pour les sites plus importants, les index peuvent atteindre plusieurs mégaoctets, nuisant aux performances sur les appareils mobiles et les connexions lentes.
Quand les bibliothèques dans le navigateur ont du sens
Envisagez Lunr ou Fuse lorsque :
- Votre site compte moins de quelques centaines de pages
- Vous avez besoin d’une correspondance floue ou d’une logique de scoring personnalisée
- Vous souhaitez zéro dépendance externe
Pour tout ce qui est plus volumineux, l’approche fragmentée de Pagefind ou une API de recherche hébergée servira mieux vos utilisateurs.
Discover how at OpenReplay.com.
API de recherche hébergées : Algolia et alternatives
Parfois, vous avez besoin de fonctionnalités au-delà de ce que les index statiques fournissent — tolérance aux fautes de frappe, personnalisation, analytique ou indexation en temps réel pour du contenu fréquemment mis à jour.
Comment fonctionne la recherche hébergée
Des services comme Algolia (y compris DocSearch pour les sites de documentation) et Orama Cloud maintiennent l’infrastructure de recherche. Vous téléversez votre index de contenu, puis interrogez leur API depuis votre JavaScript frontend.
Vous n’exécutez pas de backend — ils le font pour vous. Votre site reste statique tout en bénéficiant de capacités de recherche puissantes.
Compromis à considérer
Tarification : La plupart des services offrent des formules gratuites avec des limites d’utilisation. Attendez-vous à payer à mesure que votre site grandit ou que le trafic augmente.
Confidentialité : Les scripts tiers peuvent avoir des implications RGPD. Les requêtes de recherche transitent par des serveurs externes, ce qui compte pour certains cas d’usage.
Dépendance vis-à-vis d’un fournisseur : Vous dépendez de leur disponibilité et de la continuité de leur service.
Pour les sites volumineux, le contenu dynamique ou les fonctionnalités avancées, les API hébergées justifient souvent ces compromis.
Choisir la bonne approche
| Approche | Idéale pour | Principal compromis |
|---|---|---|
| Pagefind | La plupart des sites statiques | Nécessite une étape de build |
| Lunr/Fuse | Petits sites, logique personnalisée | Limites de taille d’index |
| API hébergées | Sites volumineux/dynamiques | Coût, confidentialité, dépendance |
Commencez avec Pagefind pour les besoins typiques de recherche sur site statique. Passez aux solutions hébergées lorsque vous dépassez les index statiques ou avez besoin de fonctionnalités avancées.
Conclusion
Ajouter une recherche à votre site web sans backend est tout à fait pratique. Pagefind gère élégamment la plupart des sites statiques, les bibliothèques dans le navigateur fonctionnent pour les projets plus petits, et les solutions d’API de recherche hébergées évoluent selon les besoins.
La clé est d’adapter votre choix à la taille de votre site, à la fréquence de mise à jour et aux exigences fonctionnelles. Pour la plupart des sites JAMstack, Pagefind offre le meilleur équilibre entre simplicité et capacité sans compromettre votre configuration d’hébergement statique.
FAQ
Oui, Pagefind fonctionne avec n'importe quel générateur de site statique, y compris Hugo, Eleventy, Astro, Jekyll et le HTML simple. Il s'exécute comme une étape post-build qui parcourt vos fichiers HTML générés, il reste donc agnostique quant à la façon dont ces fichiers ont été créés. Vous le pointez simplement vers votre répertoire de sortie une fois votre build terminé.
Pour du contenu fréquemment mis à jour, les API de recherche hébergées comme Algolia ou Orama Cloud sont votre meilleure option. Elles prennent en charge l'indexation en temps réel via des webhooks ou des appels API chaque fois que le contenu change. Les solutions statiques comme Pagefind nécessitent une reconstruction complète et un redéploiement pour mettre à jour l'index de recherche.
Les performances varient selon l'approche. Pagefind minimise l'impact en ne chargeant que les fragments d'index pertinents à la demande. Les bibliothèques comme Lunr et Fuse chargent l'intégralité de l'index en mémoire, ce qui peut causer un ralentissement notable sur les appareils mobiles pour les sites comportant des centaines de pages ou des index dépassant quelques centaines de kilooctets.
Oui, mais avec des limitations. Les API de recherche hébergées vous permettent d'indexer le contenu séparément et d'interroger via JavaScript sans modifier votre processus de build. Alternativement, vous pouvez créer manuellement un fichier d'index JSON, bien que cela devienne impraticable pour les sites plus importants. Pour la plupart des sites statiques, une étape d'indexation au moment du build offre le meilleur équilibre.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
