Volltextsuche mit Astro und Pagefind

Inhalt

• Die Backend-Suche als Kostentreiber
• Statische Suche mit Pagefind und Astro
• Isolierte Sandbox für die Suche
  • 1. Build-Integration
  • 2. Indexierung nach dem Build
  • 3. Suche im Frontend einbinden
  • 4. Relevante Inhalte filtern
• Die Vorteile dieser Umsetzung
• Fazit: Schneller, sicherer, kostenlos

Die Backend-Suche als Kostentreiber

Wer eine Volltextsuche in ein Enterprise-Projekt einbindet, landet oft bei komplexen Systemen wie Elasticsearch oder teuren SaaS-Lösungen wie Algolia. Diese Ansätze bieten viele Funktionen, verursachen aber hohe Kosten und architektonischen Aufwand.

Die Folge sind unnötige Latenzen durch API-Aufrufe, eine komplizierte Infrastruktur und Abhängigkeiten von externen Servern. Für Inhalte, die sich selten ändern, ist dieser Aufwand ineffizient.

Statische Suche mit Pagefind und Astro

Statt auf ein Backend zu setzen, nutzen wir für unsere Webseite einen statischen Ansatz. Wir kombinieren das Astro-Framework mit Pagefind.

Pagefind wurde speziell für statische Websites entwickelt. Die Indizierung findet komplett während des Build-Prozesses statt. Der Browser lädt später nur kleine, optimierte Datenfragmente. Es ist kein Server zur Laufzeit erforderlich.

Isolierte Sandbox für die Suche

Wir haben für die Suche eine isolierte Sandbox-Umgebung aufgebaut. So entwickeln und testen wir die Suchfunktion getrennt vom Haupt-Content, ohne die Stabilität des Portals zu gefährden.

Die Sandboxumgebung ist interaktiv und ermöglicht es, die Suche mit verschiedenen Suchbegriffen zu testen.

Die Architektur verbindet statischen Content mit dynamischer Funktion. Wir können Suchvorgänge direkt aus dem Kontext heraus starten. Zum Beispiel über können wir einen Trigger in der Header-Komponente nutzen, um die Suche mit einem vordefinierten Suchbegriff wie etwaPower Pageszu starten.

Der technische Workflow ist einfach und verlagert die Komplexität in den Build-Prozess.

So sieht die Umsetzung aus:

1. Build-Integration

Wir binden Pagefind direkt in den CI/CD-Prozess ein. Der Befehl in der package.json lautet:

{
  "scripts": {
    "build": "astro build && pagefind --site dist"
  }
}

2. Indexierung nach dem Build

Nach dem Build-Vorgang crawlt Pagefind die fertigen HTML-Dateien und erstellt den Suchindex.

Abbildung: Der Pagefind Indexierungsprozess. 72 Seiten werden in weniger als einer Zehntelsekunde verarbeitet.

Pagefind generiert automatisch alle benötigten Index-Dateien im Verzeichnis dist/_pagefind.

Manuelle Indexierung für lokale Tests

Um die Suche lokal zu testen, ohne den gesamten CI-Prozess zu durchlaufen, lässt sich Pagefind jederzeit manuell über den Befahl npx pagefind ausführen:

npx pagefind --site dist

Dies ist besonders hilfreich, um nach Inhaltsänderungen schnell einen neuen Index zu generieren und die Ergebnisse unmittelbar im Browser zu prüfen.

3. Suche im Frontend einbinden

Obwohl Pagefind eine fertige Standard-UI bietet, nutze ich für diese Seite die modernere Component UI. Dies ist mittlerweile die primäre Empfehlung der Entwickler, da sie eine deklarative Einbindung und vollständige Anpassung ermöglicht. Ein direktes Beispiel dafür ist die Suchfunktion in meinem Header.

Deklarative Einbindung (Component UI)

In meiner Header-Komponente binde ich die Suche über Web Components ein. Das ermöglicht eine saubere Trennung von Trigger und Suchmodul:

<!-- Search Button Trigger -->
<pagefind-modal-trigger compact hide-shortcut></pagefind-modal-trigger>

<!-- Pagefind Search Modal -->
<pagefind-modal reset-on-close></pagefind-modal>

Klassische Einbindung (Standard-UI)

Alternativ lässt sich die Suche auch über ein JavaScript-Snippet direkt in ein Element laden. Das ist hilfreich, wenn keine dezentrale Steuerung über Komponenten benötigt wird:

<link href="/_pagefind/pagefind-ui.css" rel="stylesheet" />
<script src="/_pagefind/pagefind-ui.js"></script>

<div id="search"></div>

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    new PagefindUI({
      element: '#search',
      showSubResults: true,
      translations: {
        placeholder: 'Technologie oder Projekt suchen...',
      },
    });
  });
</script>

4. Relevante Inhalte filtern

Damit Navigation oder rechtliche Hinweise nicht in den Ergebnissen erscheinen, nutzen wir HTML-Attribute:

<nav data-pagefind-ignore>
  <!-- Diese Links werden nicht indiziert -->
</nav>

<main data-pagefind-body>
  <h1>Deep-Dive zur Architektur</h1>
  <!-- Nur dieser Bereich wird indiziert -->
</main>

Die Vorteile dieser Umsetzung

Dieser Ansatz liefert für dieses Projekt messbare Vorteile:

• Keine Lizenzkosten: Pagefind ist Open Source. Es fallen keine Gebühren für externe Suchmaschinen oder SaaS-Abos an.
• Minimale Betriebskosten: Ich benötige keine teuren Such-Instanzen oder Container. Es fallen lediglich minimale Kosten für statischen Speicherplatz im Cent-Bereich an.
• Extreme Skalierbarkeit: Da der Index aus statischen Dateien besteht, skaliert die Suche nahezu unbegrenzt über CDNs, ohne dass ein Backend überlastet wird.
• Wartungsfrei: Es gibt keine Datenbank-Schemata, keine Cluster-Skalierung und keine Sicherheits-Patches für das Backend.
• Hohe Geschwindigkeit: Die Suche reagiert in Millisekunden, da sie lokal im Browser ausgeführt wird und nur kleine Index-Dateien lädt.

Fazit: Schneller, sicherer, kostenlos

Die Kombination aus Astro und Pagefind ist für meine Architektur die ideale Wahl:

• Globale Verfügbarkeit & Skalierung: Der Suchindex liegt auf dem CDN. Er skaliert automatisch mit dem Traffic, ohne zusätzliche Kosten oder Serverlast.
• Extreme Performance: Anfragen werden in Millisekunden beantwortet.
• Null Euro Lizenzgebühren: Als Open-Source-Lösung entfallen monatliche Fixkosten für Suchdienste komplett.
• Nutzererlebnis: Die Suche reagiert sofort. Das verbessert die Usability und führt Leser schneller zum Ziel.