Solr-Suche im TYPO3 Headless-Projekt: Autovervollständigung mit Nuxt.js und Solr headless

Moderne Webanwendungen stellen hohe Anforderungen an die Suchfunktion: Nutzer erwarten bereits beim Eintippen passende Vorschläge – schnell, präzise und kontextbezogen. Gerade im Headless-Umfeld, wo die Verbindung von Backend und Frontend flexibel und offen gestaltet ist, braucht es dafür leistungsstarke Lösungen.
In unserem aktuellen Headless-Stack setzen wir auf Apache Solr – kombiniert mit der Solr-headless-Extension – um Suchergebnisse inklusive Autovervollständigung performant in eine zeitgemäße Frontend-Anwendung wie Nuxt.js einzubinden. In diesem Beitrag zeigen wir, wie die Integration abgelaufen ist, welche Herausforderungen es gab und geben Tipps und Best Practices – vom Setup bis zur Ausgabe im Frontend.

Schritt 1: Apache Solr & Solr-headless-Extension – eine starke Kombination

Apache Solr ist eine der führenden Open-Source-Suchlösungen und besonders dann gefragt, wenn es um Geschwindigkeit, Skalierbarkeit und anspruchsvolle Features wie Facettierung oder Autovervollständigung geht.
In klassischen TYPO3-Installationen übernimmt die Solr-Extension das Indexieren und Ausliefern von Suchergebnissen ins Frontend. Im Headless-Kontext reicht das aber nicht aus – denn hier benötigen wir die Daten im JSON-Format und ohne klassisches HTML-Routing.
Genau hier kommt die Solr-headless-Extension (z.B. headless_solr ) ins Spiel. Sie sorgt dafür, dass Suchanfragen und Ergebnisse “API-like” ausgeliefert werden – also exakt so, wie es moderne JavaScript-Frontends wie Nuxt.js benötigen.

Autovervollständigung ist bei der Suche längst Standard: Während der Eingabe schlägt die Suche schon passende Begriffe oder Inhalte vor. Das steigert sowohl die User Experience als auch die Conversion Rate signifikant.

Schritt 2: Installation und Konfiguration von Solr & Solr-headless

Installation – Schritt für Schritt

1. Apache Solr-Server bereitstellen

Wir nutzen eine dedizierte Solr-Instanz (z.B. als Docker-Container oder Managed Service).

2. Basis-Extensions installieren

• solr – die bewährte Solr-Integration für TYPO3

• headless – von Macopedia, macht TYPO3 Headless-ready

• headless_news, headless_container_support (für spezielle Inhaltstypen)

• headless_solr – wandelt Solr-Ergebnisse in JSON um

3. Konfiguration der Extensions

• Solr set-up in der LocalConfiguration.php (Host, Core etc.)

• Indexierungs-Parameter konfigurieren: Welche Felder sind durchsuchbar? Welche Content-Typen werden indexiert?

• Headless-fähige Ausgabe: In der Solr-Konfiguration das Ausgabe-Template auf JSON stellen bzw. das Template durch die headless-Variante ersetzen.

Best Practices

• Für die Autovervollständigung einen eigenen Suggest-Core bzw. das SuggestHandler-Feature von Solr konfigurieren.

• Backend-Ausgabe ausschließlich auf relevante Felder begrenzen – das spart Bandbreite und macht die API übersichtlicher.

• Die Filter und Suchfelder konsistent dokumentieren (wichtig für die Frontend-Implementierung).

Schritt 3: Indexierung im Headless-Setup

Ein spannender Punkt bei der Integration von Solr in ein Headless-TYPO3-Projekt ist das Thema Indexierung. Während wir im Headless-Betrieb die Inhalte standardmäßig als JSON ausliefern, erwartet der Solr Page-Indexer jedoch klassisches HTML als Datenquelle.
Damit Solr die Seiten weiterhin verarbeiten kann, ist ein kleiner Trick notwendig: Wir konfigurieren TYPO3 so, dass es – speziell für den Indexer – die Inhalte im HTML-Format zurückgibt.

Das funktioniert über einen eigenen HTTP-Header, den wir bei der Indexierungsanfrage mitsenden. Die Konfiguration im TypoScript könnte beispielsweise so aussehen:

plugin.tx_solr.index.queue {
  pages {
    indexer {
      frontendDataHelper {
        headers {
          10 = x-html-only: 1
        }
      }
    }
  }
}

Mit dem Header x-html-only signalisieren wir TYPO3, dass für diese spezielle Anfrage die reguläre HTML-Ansicht ausgegeben werden soll – unabhängig davon, dass das System ansonsten im Headless-Modus arbeitet. So stellen wir sicher, dass der Solr Page-Indexer wie gewohnt arbeiten und die notwendigen Inhalte zuverlässig in den Suchindex überführen kann.
Das sorgt für eine saubere Trennung zwischen der Auslieferung an das Frontend (JSON) und der technischen Notwendigkeit für die Indexierung (HTML).

Schritt 4: Implementierung der Autovervollständigung (Suggest) mit Solr

Damit Nutzer während der Eingabe direkt passende Vorschläge erhalten, greifen wir auf die Suggest-Funktion von Solr zurück. Das funktioniert so:

• Index-Optimierung: Die Suggestion-Logik basiert auf speziell dafür vorbereitetem Indexmaterial (z.B. häufige Begriffe, Titel, Tags).

• Konfiguration: In Solr aktivieren wir den Suggest-Handler (/suggest). In der solrconfig.xml und den TypoScript-Einstellungen wird konfiguriert, welche Felder und Modelle für Vorschläge genutzt werden.

• Anfrage-Handling: Für jede User-Eingabe (z.B. nach jedem Tastendruck im Suchfeld) sendet das Frontend eine asynchrone Anfrage (AJAX / API-Call) an die TYPO3- bzw. direkte Solr-Endpoint.

• Antwortformat: Die headless_solr-Extension liefert die Vorschläge schlank und als JSON – perfekt für moderne JavaScript-Anwendungen.

Praxis-Tipp

Gerade bei mehreren Content-Typen empfiehlt es sich, in Solr eigene Filter für Vorschläge anzulegen (z.B. nur News-Titel, Content-Elemente, Produkte). So bleibt die Autovervollständigung präzise und relevant.

Schritt 5: Suche & Suggestions ins Nuxt.js-Frontend einbinden

Hier liegt die Magie aus Usersicht!

• Ansatz: Im Nuxt/Vue-Frontend haben wir ein neues Such-Template gebaut. Beim Eintippen in das Suchfeld wird über einen API-Call an die TYPO3-Headless-Instanz eine Suchanfrage gestellt.

• Live-Vorschläge: Nach jedem Tastendruck schickt das Frontend eine Anfrage (üblicherweise debounce-gesteuert) und erhält eine JSON-Antwort mit Vorschlägen.

• Darstellung: Die Vue-Komponente bereitet die Suggestions visuell auf – so entsteht eine moderne Auto-Complete- oder “Typeahead”-Experience.

• Deep Dive: Für API-Calls empfiehlt sich in Nuxt die Nutzung von useFetch oder axios . Wichtige Punkte:

  • Bei jeder Eingabe ein Request abschicken, die Antworten zwischenspeichern (Caching) und Ergebnisse jeweils rendern.

  • Suchergebnisse optisch trennen (z.B. nach Inhaltstypen), um Orientierung zu geben.

Pro-Tipp:

Die API-Schnittstelle ist dank headless-Architektur flexibel: Sie kann nicht nur für das eigene Nuxt-Frontend, sondern auch für andere Anwendungen (z.B. Mobile App, SPA, Shop-Anbindung) genutzt werden.

Schritt 6: Stolpersteine und Lösungen

Bei der Umsetzung sind uns folgende Fallen begegnet – hier unsere Lösungen:

• Content-Ausgabe im falschen Format: Wenn Solr weiterhin HTML liefert (statt JSON), liegt das meist an einer fehlenden Anpassung im Template oder an nicht gesetzten Headern. Tipp: Spezial-Header für API-Requests im Frontend senden und serverseitig abfangen!

• Indexierung zu vieler/zu weniger Felder: Regelmäßig prüfen, ob wirklich alle (und nur die) Felder indiziert werden, die für Suggest gebraucht werden.

• CORS und Autorisierung: API-Requests über Domains hinweg müssen korrekt mit CORS-Headern und ggf. Authentifizierung bedacht werden.

• Performance bei großen Indizes: Möglichst früh filtern und Suggest-Suchfelder schlank halten, damit die Antwortzeiten niedrig bleiben.

Fazit & Ausblick

Mit der Kombination aus Solr, TYPO3 Headless und einer modernen Nuxt/Vue-Frontend-Lösung bieten wir eine Suche, die schnell, flexibel und nutzerfreundlich ist – perfekt für anspruchsvolle Webprojekte.

Die Vorteile für unsere Kunden:

• Höchste Performance durch direkte JSON-Ausgabe

• Maximale Freiheit in der Frontendumsetzung

• Zukunftssicher und flexibel, um weitere Filter, Kategorien oder sogar eine Synonymdatenbank zu integrieren

Ihre Suche, Ihr Projekt – unser Antrieb!

Denken Sie über neue Filtermöglichkeiten, Boosting einzelner Inhalte oder Mehrsprachigkeit nach? Sprechen Sie uns an! Wir helfen Ihnen gerne bei der Entwicklung Ihrer maßgeschneiderten Headless-Suchlösung.