Migration zu Next.js / Astro in Duisburg

Ich bin Mariusz Szatkowski, ein einzelner Entwickler in Gdynia, und arbeite seit 2006 mit WordPress. Ich arbeite remote und schriftlich. Gestaltung und Aufbau der Suchseite kommen von Ihnen, ich setze sie um.

Die Startseite von duisport nennt vier Leistungsfelder: Real Estate, Intermodal, Kontraktlogistik und Industriegüterverpackung (duisport). Wer einen Auftritt mit mehreren so getrennten Feldern betreibt, kennt das Muster: Besucher tippen den Begriff ein, den sie aus ihrer eigenen Branche kennen, und der steht selten genauso im Menü. Das ist meine Beobachtung, kein Befund über eine bestimmte Website. Sie erklärt aber, warum ich die Suche vor dem Umzug prüfe und nicht danach.

Foto: giggel, CC BY 3.0, Wikimedia Commons.

#Was die WordPress-Suche bisher getan hat

WP_Query kennt den Parameter s für ein Suchwort. Als durchsuchbare Spalten nennt die Dokumentation post_title, post_excerpt und post_content; ein vorangestellter Bindestrich schließt einen Begriff aus (WP_Query). Die Adresse der Ergebnisseite liefert get_search_link(): Ist keine Permalinkstruktur für die Suche gesetzt, lautet sie /?s=Begriff, sonst folgt sie der Struktur, die WordPress für Suchen vorsieht (get_search_link).

Für den Umzug heißt das: Die Suche war eine Anfrage an die Datenbank, die bei jedem Aufruf lief. Nach dem Umzug gibt es diese Datenbank nicht mehr, oder sie steht nicht mehr im Weg jeder Seitenabfrage. Ein statisch ausgelieferter Auftritt braucht deshalb eine andere Antwort.

#Vier Wege im Überblick

Keiner der vier ist grundsätzlich der beste. Bei einer Unternehmensseite mit Inhalten in Markdown oder einem Headless-CMS ist Pagefind mein Standard, weil es nichts Zusätzliches betreibt. Bei den anderen Wegen begründe ich Ihnen schriftlich, warum sie sich lohnen.

#Statische Suche mit Pagefind

Pagefind bezeichnet sich als vollständig statische Suchbibliothek, die ohne gehostete Infrastruktur auskommt. Sie läuft nach dem Static-Site-Generator, liest das gebaute HTML und legt ein Suchpaket in die Build-Dateien. Nach Angabe des Projekts genügt für eine Website mit 10.000 Seiten eine Datenmenge unter 300 kB im Netz (Pagefind). Der Aufruf ist kurz:

npx -y pagefind --site dist

Bei Astro zeigt --site auf das Ausgabeverzeichnis des Builds, bei Next.js mit output: 'export' auf den Ordner out (Next.js, Static Exports). Starlight, das Dokumentationsgerüst von Astro, bringt Pagefind als Standard mit (Starlight, Site Search).

Entscheidend ist, was in den Index kommt. Sobald irgendwo auf der Website ein Element data-pagefind-body steht, werden alle Seiten ohne dieses Attribut nicht indexiert. Navigation, Fußbereich, Skripte und Formulare überspringt Pagefind von selbst; weitere Bereiche schließt data-pagefind-ignore aus (Pagefind, Indexing). Ich setze das Attribut einmal im Layout um den Hauptinhalt und prüfe danach am gebauten HTML, was tatsächlich im Index gelandet ist.

Eine eigene Ergebnisseite ruft die Programmierschnittstelle auf:

const pagefind = await import("/pagefind/pagefind.js");
const search = await pagefind.search("Verpackung");
const treffer = await Promise.all(
  search.results.slice(0, 5).map((r) => r.data())
);

Die Daten jedes Treffers werden einzeln geladen, damit wenig Bandbreite anfällt (Pagefind, Search API). Das Aussehen der Ergebnisseite liefern Sie als Vorlage, ich baue es nach.

Ein Punkt betrifft Industrie und Logistik besonders: Pagefind entfernt beim Indexieren die meiste Interpunktion, auch aus dem Suchbegriff. Wer nach Artikel- oder Normnummern mit Bindestrich oder Schrägstrich sucht, stellt die Option für zusätzliche Zeichen ein, sonst verschwimmen ähnliche Nummern.

Die Grenze steht ebenfalls im Prinzip: Pagefind kennt nur, was beim Build im HTML steht. Lagerbestände oder personenbezogene Inhalte aus einer Datenbank gehören nicht in diesen Index.

#Gehostete Suche mit Algolia

Algolia beschreibt sich als gehostete Such- und Retrieval-Plattform. Man schickt Datensätze aus den eigenen Quellen an einen Index; Einstellungen des Index bestimmen, wie gefunden, sortiert und gefiltert wird. Relevanz, Auswertungen und Tests stellt das Dashboard bereit (Algolia, Get started). Bei statischen Websites erzeugt ein Schritt im Build die Datensätze und lädt sie hoch.

Zwei Dinge stehen in der Dokumentation, die man vorher wissen sollte. Erstens: Der Search-only-API-Key ist für den Frontend-Code gedacht, aber Dritte könnten ihn nutzen, um Ihre Indizes abzugreifen oder Anfragen zu erzeugen. Der Anbieter empfiehlt deshalb eingeschränkte Schlüssel, etwa mit Rate Limit oder erlaubten Referrern (Algolia, API keys). Zweitens: Das kostenlose Programm DocSearch gilt öffentlicher technischer Dokumentation und technischen Blogs. Anträge mit nicht technischem Inhalt lehnt der Anbieter in der Regel ab (DocSearch, Who can apply). Für die Seite eines Logistikers oder Maschinenbauers ist es also meist nicht gedacht.

Eine gehostete Suche lohnt sich, wenn jemand aus Ihrem Haus Ranking und Auswertung selbst einstellen soll, ohne dass ich eine Zeile ändere. Wenn nicht, ist sie ein Dienstleister mehr in der Datenschutzerklärung.

#Serverseitige Suche mit Datenbank

Wer Produkte, Dokumente oder Anfragen ohnehin in einer Datenbank hält, kann dort suchen. PostgreSQL bringt dafür eine eigene Volltextsuche mit: Texte werden in Wortbestandteile zerlegt und normalisiert, dazu kommen Ranking und Indexe. Die Dokumentation stellt klar, dass LIKE und reguläre Ausdrücke keine linguistische Unterstützung haben, keine Reihenfolge nach Relevanz liefern und ohne Indexunterstützung langsam sind (PostgreSQL, Introduction). Ein GIN-Index auf to_tsvector beschleunigt die Suche; die Funktion muss dafür mit einer Sprachkonfiguration aufgerufen werden (PostgreSQL, Tables and Indexes). Für Suchfelder eignet sich websearch_to_tsquery, dessen Syntax an Websuchmaschinen erinnert (PostgreSQL, Controls).

Das Gegenstück ist der Betrieb. Eine Suchseite, die bei jeder Anfrage fragt, muss auf dem Server gerendert werden. In Next.js macht schon der Zugriff auf searchParams die Seite dynamisch (Next.js, page.js), und Astro braucht für Seiten on demand einen Adapter (Astro, On-demand rendering). Damit holen Sie sich einen Teil dessen zurück, was der Umzug loswerden sollte: Server, Datenbank, Updates, Backups. Für eine Unternehmensseite mit einigen hundert Seiten ist das selten gerechtfertigt. Für ein Dokumentenarchiv mit Zugriffsrechten schon. Zur Pflege nach dem Start steht mehr auf meiner Seite zur Wartung nach der Migration für Wuppertal.

#Suche in mehreren Sprachen

Pagefind liest das lang-Attribut des html-Elements und indexiert jede erkannte Sprache getrennt. Im Browser lädt es denselben Index wie die Seite, auf der gesucht wird: Auf einer deutschen Seite werden nur deutsche Seiten durchsucht. Stemming ist unter anderem für Deutsch, Englisch und Niederländisch eingebaut, die Oberfläche passt sich der Seitensprache an. Wer eine gemeinsame Suche will, schaltet das mit der Option für eine erzwungene Sprache ab und erhält einen Index für alles (Pagefind, Multilingual search).

Voraussetzung ist ein sauber gesetztes lang auf jeder Seite. Wer es aus WordPress mit einem Mehrsprachen-Plugin übernimmt, prüft das bei der Abnahme, denn ein Fehler dort ist ein Fehler im Index. Die Verknüpfung der Sprachversionen selbst, also URLs und hreflang, beschreibe ich auf der Seite zur mehrsprachigen Migration für Basel. In PostgreSQL gilt dasselbe Prinzip: Jede Sprachfassung braucht ihre Konfiguration beim Anlegen des Index und bei der Abfrage.

#Beliebte Suchadressen nicht verlieren

WordPress-Suchseiten haben eine Adresse, und Adressen gelangen in Lesezeichen, Mails und Verlinkungen. Welche davon Sie behalten wollen, ist eine Datenfrage, keine Vermutung. Ich ziehe die Liste aus der Search Console und aus den Server-Logs des alten Hostings: Welche /?s=-Adressen haben nach Abzug von Bots echte Aufrufe?

Für die wenigen, die Aufrufe haben, gibt es drei Ziele:

1. Die neue Suchseite mit demselben Begriff. Sinnvoll, wenn der Begriff weiter gesucht wird.
2. Eine Inhaltsseite, die den Begriff besser beantwortet. Das ist meist der bessere Weg, etwa bei Markennamen oder Leistungen.
3. Eine 404-Antwort. Das ist richtig für Spam-Begriffe, die nie jemand gesucht hat.

Umgeleitet wird mit einem serverseitigen 301. Google wertet eine permanente Weiterleitung als Signal, dass das Ziel die kanonische Adresse sein soll (Google, Redirects). Die Technik hängt vom Hosting ab: Cloudflare Pages beschreibt die Quelle in der Datei _redirects als Dateipfad mit Platzhaltern, die Datei fasst höchstens 2.000 statische und 100 dynamische Weiterleitungen (Cloudflare Pages, Redirects). Eine Bedingung auf einen Query-Parameter sieht diese Dokumentation nicht vor. Next.js kennt sie dagegen über has mit type: 'query' (Next.js, redirects), führt bei einem statischen Export aber keine Weiterleitungen aus; die Dokumentation zählt sie dort zu den nicht unterstützten Funktionen. Welche Variante bei Ihnen greift, hängt vom Hosting ab; das lege ich in der schriftlichen Planung fest. Die Methode der Umleitungstabelle insgesamt steht auf meiner Seite zu Weiterleitungen für Bremen.

Die neue Suchseite selbst bekommt <meta name="robots" content="noindex">. Nach der Google-Dokumentation hält das eine Seite aus dem Index heraus (Google, noindex). Der Rahmen der Seite ist nicht der Inhalt, den jemand finden soll, und jede neue Suchanfrage erzeugt sonst eine weitere Adresse.

#Datenschutz bei gehosteter Suche

Zuständig für nicht öffentliche Stellen in Duisburg ist die LDI NRW. Ihr Muster für Datenschutzhinweise nennt unter den bei jedem Zugriff verarbeiteten Daten Datum, Uhrzeit, IP-Adresse, aufgerufene Seite und Browserdaten. Es hält fest, dass ein Hoster diese Daten als Auftragsverarbeiter erhält, und verlangt, die Erklärung zu ergänzen, wenn aktive Inhalte oder ein Kontaktformular hinzukommen (LDI NRW, Muster).

Daraus folgt für die Suche:

• Pagefind: Index und Skript liegen auf Ihrem Hosting. Es entsteht kein zusätzlicher Empfänger, nur die Zugriffe, die ohnehin protokolliert werden.
• Gehostete Suche: Der Browser des Besuchers fragt direkt beim Anbieter an. Der Anbieter erhält damit mindestens die technischen Verbindungsdaten und den Suchbegriff. Besucher tippen dort auch Namen oder Bestellnummern, das ist meine Einschätzung aus der Praxis, keine Aussage des Anbieters.
• Auftragsverarbeitung: Nach Art. 28 DSGVO arbeitet ein Verantwortlicher nur mit Auftragsverarbeitern, die hinreichend Garantien bieten, und regelt die Verarbeitung in einem Vertrag oder einem anderen Rechtsinstrument. Der Vertrag und der Eintrag in den Datenschutzhinweisen gehören dazu.
• Standort: Algolia lässt bei neuen Anwendungen auf klassischer Infrastruktur eine Region wählen, darunter Europa (Frankreich), nicht jede Region steht in jedem Tarif zur Verfügung (Algolia, Servers and clusters). Ob das für Ihren Fall reicht, bewertet Ihre Datenschutzberatung.
• Browser-Speicher: § 25 TDDDG betrifft das Speichern auf dem Endgerät und das Auslesen von dort. Ich prüfe am fertigen Build in den Entwicklertools, ob eine Suchlösung etwas ablegt. Zum Banner im Allgemeinen siehe meine Seite zu Formularen und Einwilligung für Bonn.

Ich gebe keine Rechtsberatung. Ich beschreibe, was technisch passiert, und Ihre Datenschutzberatung entscheidet, ob es zulässig ist.

#So läuft die Entscheidung mit mir ab

1. Sie senden mir die Adresse der Website, den Zugang zur Search Console, falls vorhanden, und eine Liste der Sprachen.
2. Ich liste die Suchbegriffe aus Search Console und Logs und schreibe Ihnen, welcher der vier Wege passt und warum.
3. Sie geben die Entscheidung schriftlich frei. Die Gestaltung der Suchseite kommt von Ihnen, zum Beispiel in meiner Vorlage als Tabelle.
4. Ich baue die Suche und die Umleitungen im Staging und lasse Sie Begriffe testen. Wie ich Staging und Umschaltung allgemein handhabe, steht auf meiner Seite zum gestaffelten Umzug für Köln.
5. Nach dem Start prüfe ich die 404-Meldungen auf alte Suchadressen, die dennoch Aufrufe haben.

#Häufige Fragen

#Braucht meine Website nach dem Umzug überhaupt eine Suche?

Das hängt davon ab, wie die Besucher heute suchen. Eine Website mit wenigen Dutzend Seiten und klarer Navigation kommt oft ohne aus. Je mehr getrennte Leistungsfelder, Datenblätter oder Meldungen es gibt, desto eher lohnt sie sich. Ich sehe vorher in die Daten Ihrer Search Console und, falls ein Plugin sie protokolliert hat, in die bisherigen Suchbegriffe.

#Findet Pagefind Inhalte, die nach dem Build geändert wurden?

Nein. Pagefind läuft nach dem Build und liest das erzeugte HTML. Nach einer Änderung braucht es einen neuen Build und damit einen neuen Index. Bei einer Website, die ohnehin bei jeder Änderung neu gebaut wird, ist das Teil des Ablaufs.

#Kann die Suche Deutsch und Englisch getrennt durchsuchen?

Ja. Pagefind liest das lang-Attribut des html-Elements und baut je Sprache einen eigenen Index. Eine Suche auf einer deutschen Seite durchsucht nur die deutschen Seiten. Wer eine gemeinsame Suche über alle Sprachen will, kann das per Option abschalten, dann gibt es einen Index für die ganze Website.

#Ist DocSearch von Algolia für eine Firmenwebsite kostenlos?

Wahrscheinlich nicht. Nach der Anbieterseite richtet sich das Programm an öffentliche technische Dokumentation und technische Blogs, und Anträge mit nicht technischem Inhalt lehnt der Anbieter in der Regel ab. Für eine Leistungs- oder Industrieseite kommt ein regulärer Algolia-Tarif in Frage, dessen Bedingungen Sie beim Anbieter erfragen.

#Darf ich eine gehostete Suche nutzen, ohne gegen die DSGVO zu verstoßen?

Ja, wenn Rechtsgrundlage, Vertrag und Datenschutzhinweise stimmen. Bei einem gehosteten Dienst erhält der Anbieter die Suchbegriffe und technische Verbindungsdaten. Er ist dann in der Regel Auftragsverarbeiter nach Art. 28 DSGVO. Die rechtliche Bewertung trifft Ihre Datenschutzberatung, ich liefere die technische Beschreibung dazu.

#Was passiert mit alten Suchadressen wie /?s=Begriff?

Ich prüfe, welche davon überhaupt noch Zugriffe haben, und leite die wenigen wichtigen per 301 auf die neue Suchseite oder auf eine passende Inhaltsseite um. Alle übrigen laufen in eine saubere 404-Antwort. Eine pauschale Umleitung auf die Startseite vermeide ich.

#Ihre Anfrage

Schreiben Sie mir über das Kontaktformular: Adresse der Website, Sprachen, Ziel und Wunschtermin genügen. Ich antworte schriftlich an Werktagen. Die erste Einschätzung zur Suche kostet nichts.