Integration von SvelteKit in Headless WordPress

Headless WordPress ist schon seit einiger Zeit ein großer Trend in der Webentwicklung. Die Entkopplung von Frontend und Backend kann zu einem höheren Maß an Kontrolle, Omnichannel-Anwendungen und einigen interessanten Einsatzmöglichkeiten dieser neuen Technologie führen.

Viele Entwicklerinnen und Entwickler experimentieren gerne mit Frameworks wie Vue.js und React.js oder sogar mit Web-Frameworks wie Django und Ruby on Rails, die normalerweise nicht mit WordPress kompatibel sind.

Es gibt viele solcher Frameworks, die gut mit Headless WordPress funktionieren, aber SvelteKit ist etwas Besonderes. Das UI-Framework wurde speziell entwickelt, um die Entwicklung von Webanwendungen durch prägnanten und eleganten Code zu erleichtern. Es kann ganz einfach Funktionen optimieren, die in einer entkoppelten Umgebung normalerweise nicht gut funktionieren.

Willst du mehr darüber erfahren? Wir erklären dir die Grundlagen von Headless WordPress und zeigen dir, wie du SvelteKit in deiner Umgebung einsetzen kannst.

Was ist Headless WordPress?

Du kennst vielleicht schon den Unterschied zwischen dem WordPress Front- und Backend. Im Backend laufen alle grundlegenden Vorgänge des CMS ab: Du erstellst Beiträge und Seiten, installierst Plugins, gestaltest dein Theme und änderst Einstellungen.

Auf der anderen Seite ist das Frontend die Website, die den Besuchern angezeigt wird. WordPress nutzt neben seinen Themes und Plugins verschiedene Funktionen wie get_posts(), um die benötigten Daten abzurufen und anzuzeigen.

Nehmen wir zum Beispiel das Recent Posts Widget, das auf der Startseite angezeigt wird. Mithilfe solcher Funktionen greift es auf Daten aus dem Backend zu und zeigt deine neuesten Beiträge im öffentlichen Frontend an.

Das Backend und das Frontend von WordPress sind eng miteinander verwoben und hängen in vielerlei Hinsicht voneinander ab, aber das bedeutet nicht, dass sie untrennbar sind.

Hier kommt das Konzept des „Headless WordPress“ ins Spiel: Damit trennst du das WordPress-Backend ab oder entkoppelst es. Du kannst es dann mit jeder beliebigen Frontend-Technologie verbinden – nicht nur mit PHP, sondern mit jedem Webentwicklungs-Framework oder sogar mit einer Anwendung.

Dies hat den zusätzlichen Vorteil, dass du das WordPress CMS über mehrere Kanäle hinweg nutzen kannst. Portiere deine Blogbeiträge oder andere CMS-Elemente auf mehrere Websites, mobile Apps und wo immer du willst.

Insgesamt gibt dir das Headless WordPress mehr Kontrolle über das CMS und die Möglichkeit, Technologien zu nutzen, die normalerweise nicht mit dem CMS kompatibel sind. Außerdem erspart es dir, eine ganze Anwendung von Grund auf neu zu schreiben – du kannst das integrierte CMS von WordPress nutzen, um einen Teil der Arbeit zu erledigen.

Was ist die REST-API?

Damit Headless WordPress funktioniert, musst du deine Anwendungen über eine API (Application Programming Interface) miteinander verbinden. APIs ermöglichen es, zwei verschiedene Anwendungen miteinander zu verbinden, in diesem Fall das WordPress-Backend und deine benutzerdefinierte Front-End-Anwendung.

Es gibt zwar viele Arten von APIs, aber die REST-API ist eine, die in WordPress integriert ist. Sie ermöglicht es externen Anwendungen, sicher Daten aus dem WordPress-Backend abzurufen, ohne dass sie die Verwaltungsoberfläche passieren müssen.

Die REST-API wird in einer Reihe offizieller WordPress-Funktionen verwendet, z. B. im Block-Editor, und die meisten Themes und Plugins, die eine API benötigen, um zu funktionieren, nutzen diese.

Das gilt auch für Headless-Anwendungen. Viele von ihnen nutzen die REST-API als Schnittstelle zu WordPress, um Daten aus dem Backend abzurufen und sie dynamisch in deiner Front-End-Anwendung darzustellen.

Die REST-API stellt Endpunkte zur Verfügung, die verschiedene WordPress-Ressourcen repräsentieren, z. B. Beiträge, Seiten, Benutzer, Kategorien und so weiter. Wenn du auf diese zugreifst, kannst du diese Daten im Frontend anzeigen.

Aber während du die REST API damit nutzen kannst, verlässt sich SvelteKit für viele seiner Funktionen hauptsächlich auf eine andere Technologie: GraphQL.

Was ist GraphQL?

GraphQL ist keine API selbst, sondern eine API-Abfragesprache. Im Gegensatz zu herkömmlichen REST-APIs, bei denen Kunden oft mehrere Anfragen an verschiedene Endpunkte stellen müssen, um zusammenhängende Daten abzurufen, kannst du mit GraphQL alle deine Daten mit einer einzigen Anfrage abrufen.

Insgesamt wurde GraphQL so konzipiert, dass du präzisere Abfragen in einem schnellen und optimierten Rahmen erstellen kannst. Außerdem ist es leichter zu erlernen und weniger komplex als die REST-API.

Aus diesen Gründen verwenden viele Headless-WordPress-Frameworks GraphQL anstelle oder neben der REST-API. Obwohl GraphQL nicht wie die REST-API mit WordPress gebündelt ist, gibt es Plugins, mit denen du diese Funktionalität in das CMS integrieren kannst.

Dank des optimierten Frameworks vermeidest du, dass du zu wenig oder zu viele Daten abrufst. Du kannst mit einer einzigen Abfrage genau die Daten abrufen, die du brauchst, was dein Netzwerk und deinen Server deutlich entlastet.

Was ist SvelteKit?

SvelteKit ist ein Web-Framework, das auf Svelte aufbaut, einem Open-Source-Frontend-Framework, das in seiner Funktion Next.js oder React ähnelt. Es wurde entwickelt, um die Erstellung von Webanwendungen zu vereinfachen, und obwohl es nicht speziell für Headless WordPress entwickelt wurde, ist dies nur eine von vielen möglichen Anwendungen.

SvelteKit wurde auf HTML, CSS und Javascript aufgebaut – mehr nicht. Dadurch ist es super einfach zu bedienen und unabhängig von Frameworks, sodass du es neben anderen Frameworks verwenden kannst, um eine vollständig dynamische Front-End-Anwendung oder eine statische Website zu erstellen.

Svelte wurde 2016 auf den Markt gebracht und wird auch heute noch aktiv weiterentwickelt. Das Web-Framework SvelteKit kam ein paar Jahre später, im Jahr 2020. Beide sind in der Webentwicklungsszene bekannt und beliebt und ermöglichen es dir, einfachen und eleganten Code zu schreiben.

Warum du SvelteKit für Headless WordPress verwenden solltest

Es gibt ein paar Aspekte von Headless WordPress, die mühsam zum Laufen zu bringen sind. Dank des minimalen Designs von SvelteKit werden diese Probleme minimiert und machen die Einrichtung von Headless WordPress viel reibungsloser.

Hier sind nur ein paar der Funktionen, die SvelteKit bietet.

• Nur Javascript. Im Gegensatz zu anderen Frameworks musst du dir kaum Gedanken über Abhängigkeiten und verwirrende Einstellungen machen. Oft ist gar keine Konfiguration erforderlich. SvelteKit funktioniert überall, wo Javascript laufen kann.

• Framework-unabhängig. SvelteKit lässt sich aufgrund seiner Einfachheit gut mit anderen Frameworks kombinieren. Du kannst jede beliebige Technologie in deine Headless-WordPress-Anwendung integrieren.

• Erweiterbar. Wenn SvelteKit in deiner Umgebung nicht perfekt funktioniert, ist es extrem einfach, es zu erweitern und alles zu beheben, was in deinem Setup nicht gut funktioniert.

• Leichtgewichtig und einfach zu erlernen. SvelteKit basiert nur auf Javascript, HTML und CSS. Im Vergleich zu herkömmlichen Frameworks ist es sehr leicht und die Arbeit damit ist super einfach. Erstelle sauberen, eleganten und einfachen Code mit kompakten und prägnanten Komponenten.

• Datenabrufe leicht gemacht. GraphQL, mit dem SvelteKit gut zusammenarbeitet, vereinfacht das Abrufen von Daten aus WordPress und ermöglicht es dir, präzisere und effizientere Abfragen zu stellen.

• Authentifizierung ist einfach. SvelteKit hat vor kurzem NextAuth.js-Unterstützung implementiert und sorgt so für die Sicherheit deiner Daten, während es gleichzeitig einfach zu installieren ist.

• Server Side Rendering (SSR) und Static Site Generation (SSG). SvelteKit ist nicht nur für statische Websites oder dynamische Anwendungen geeignet. Mit diesem Framework kannst du beides ganz einfach umsetzen, denn es bietet mehrere Optionen für das Rendering von Seiten und die Generierung statischer Websites.

• Sitemaps. Wenn du dir schon mal die Haare gerauft hast, um eine funktionierende Sitemap auf einer Headless-Website zu erstellen, bist du nicht allein. SvelteKit ermöglicht es dir, Sitemaps mit einem Endpunkt dynamisch zu rendern.

• Lebendige Gemeinschaft. Es gibt viele SvelteKit-Fans, die mit dieser Software Anwendungen entwickeln. Wenn du Hilfe brauchst oder dich über das Framework austauschen willst, findest du sie überall im Internet und in den sozialen Medien. Es gibt sogar einen Discord-Server mit über 60.000 Mitgliedern!

Wie man mit SvelteKit eine kopflose WordPress-Website erstellt

Bist du bereit, loszulegen? In dieser Anleitung erfährst du, wie du WordPress in einer lokalen Umgebung einrichtest, SvelteKit auf deinem Rechner installierst und deine Headless-WordPress-Instanz anschließend auf Kinsta bereitstellst.

Lass uns gleich loslegen.

Schritt 1. Eine WordPress-Website einrichten

Es gibt viele Möglichkeiten, eine lokale WordPress-Instanz auf deinem Computer einzurichten. Wenn du bereits ein Kinsta-Konto hast, kannst du eine Website mit dem MyKinsta-Dashboard erstellen oder die Kinsta-API nutzen, um eine Website einzurichten.

Für diese Anleitung verwenden wir DevKinsta, ein lokales WordPress-Entwicklungskit. Du brauchst kein Kinsta-Hosting, um DevKinsta zu nutzen – es ist völlig kostenlos.

Lade DevKinsta über den Link oben herunter. Wenn du Hilfe bei der Installation brauchst oder dich einarbeiten möchtest, kannst du die DevKinsta-Dokumentation zu Rate ziehen.

Sobald DevKinsta installiert und eingerichtet ist, befolge diese Schritte, um eine lokale WordPress-Umgebung zu erstellen.

1. Erstelle eine neue WordPress-Website oder eine benutzerdefinierte Website, wenn du Einstellungen wie PHP-Version, Multisite usw. ändern möchtest.
2. Gib deinen Website-Namen, deinen Benutzernamen, dein Passwort und alle anderen Informationen ein und klicke auf Website erstellen. Warte ein wenig, während DevKinsta deine lokale WordPress-Umgebung einrichtet.
3. Du gelangst nun zum Bildschirm Site Info. Notiere dir deinen Website-Host, denn das ist die lokale URL, auf die du zugreifst, um deine Website zu öffnen.
4. Klicke entweder auf Website öffnen und navigiere zu http://<deineSite>.local/wp-admin oder klicke einfach auf WP Admin, um die Seite direkt zu öffnen. Melde dich mit deinen Anmeldedaten an, die du zuvor eingegeben hast.

Set 2. WordPress für die Headless-Bereitstellung vorbereiten

Auf deinem brandneuen Admin-Startbildschirm musst du ein paar zusätzliche Schritte unternehmen, um deine WordPress-Installation für die Headless-Bereitstellung vorzubereiten.

Da SvelteKit für viele seiner Funktionen auf GraphQL angewiesen ist, musst du WPGraphQL installieren. Mit diesem Plugin kannst du das GraphQL-Framework nutzen, um dich mit Headless-Javascript-Technologien wie NextJS, Gatsby und natürlich SvelteKit zu verbinden.

Dazu navigierst du zu Plugins > Add New und installierst WPGraphQL. Damit fügst du eine GraphiQL-IDE zu deiner Verwaltungsleiste hinzu, mit der du GraphQL-Abfragen in WordPress schreiben kannst.

Du musst auch deine Permalinks korrigieren. WordPress wird standardmäßig mit einfachen Permalinks ausgeliefert, die mit der JSON-API, auf die sich REST stützt, oder mit SvelteKit selbst aufgrund von Beschränkungen in Next.js nicht funktionieren.

Gehe zu Einstellungen > Permalinks und schalte die einfachen Permalinks aus. Probiere Permalinks für Beitragsnamen.

Um zu überprüfen, ob es funktioniert hat, hänge „/wp-json“ an die URL deiner lokalen Website an. Du solltest sehen, dass der Inhalt deiner Website als JSON-Daten ausgegeben wird.

Später musst du ein Plugin wie Redirection oder All In One SEO Pro verwenden, um deine URL auf die von dir erstellte Frontend-Anwendung zu leiten. Installiere ein Umleitungs-Plugin und richte es ein, sobald du bereit bist, Nutzer auf deine SvelteKit-Anwendung umzuleiten.

Damit bist du fertig und bereit, SvelteKit zu installieren.

Schritt 3. Richte deine SvelteKit-Umgebung ein

Das Wichtigste zuerst: SvelteKit hat einige grundlegende Systemanforderungen, darunter Node 18.13 oder höher. Da das Framework so leicht ist, funktioniert es auf fast jedem System. Stelle sicher, dass du neben Node auch npm installiert hast, sonst funktioniert es nicht!

Jetzt kannst du SvelteKit auf deinem System installieren. In der Dokumentation findest du eine ausführliche Anleitung, aber hier sind die Grundlagen.

Zuerst installieren wir Svelte mit dem Paket create-svelte. Du kannst dein Projekt („my-svelte-app“) nennen, wie du willst. Mit diesem Befehl wird eine Svelte-Anwendung mit allen Grundeinstellungen erstellt.

npm create svelte my-svelte-app

Es werden verschiedene Fragen gestellt, die du mit Ja oder Nein beantworten musst, um deine SvelteKit-Umgebung zu erstellen.

Es gibt einige npm-Pakete, die du installieren musst, also rufe mit diesem Befehl das Stammverzeichnis deines Projekts auf (ersetze „my-svelte-app“ durch den Namen, den du ihm gegeben hast).

cd my-svelte-app/

Führe dann diesen Befehl aus, um die benötigten Pakete zu installieren:

npm install

Und zum Schluss führst du den Entwicklungsserver mit diesem Befehl aus:

npm run dev

Sobald der Server gestartet ist, kannst du deine laufende Anwendung unter dieser URL überprüfen: http://localhost:3000

Anstatt den Standard-Seitenrenderer zu verwenden, kannst du auch zum statischen Renderer wechseln, um eine statische SvelteKit-Seite zu erstellen.

Damit sollte SvelteKit erfolgreich eingerichtet sein, und du kannst mit der Erstellung deiner Headless-Website beginnen.

Schritt 4. Nutze GraphQL, um SvelteKit und WordPress zu verbinden

Während du mit GraphQL und deiner SvelteKit-Umgebung experimentierst, solltest du diese Tipps beachten.

• Lies die Einführung zu Svelte/SvelteKit, um zu verstehen, wie dieses Framework funktioniert. Dieses Tutorial ist interaktiv; du kannst den Code selbst ausprobieren!
• Du kannst das SvelteKit GraphQL-Paket installieren, wenn du Probleme hast, deine GraphQL-API manuell einzurichten.
• Als Teil von WPGraphQL kannst du auch Gutenberg-Blöcke über wp-graphql-gutenberg verwenden, das mit dem Standard-Plugin geliefert wird.
• Während du die REST-API bis zu einem gewissen Grad mit SvelteKit nutzen kannst, funktioniert die erweiterte Funktionalität von GraphQL am besten mit diesem Framework. Wenn du lieber die REST-API verwenden möchtest, schau dir diese SvelteKit-Demo auf GitHub an, die die REST-API nutzt, um die beiden Plattformen zu verbinden.

Du solltest dich auch über das Laden von Daten und Routing informieren, um SvelteKit und WordPress zu integrieren. Es gibt viele Möglichkeiten, sich mit WordPress zu verbinden und eine Headless Anwendung zu bauen.

Schritt 5. WordPress und SvelteKit auf Kinsta bereitstellen

Wenn du eine Headless-Umgebung eingerichtet hast und mit der Bereitstellung loslegen kannst, musst du zwei separate Schritte durchführen: WordPress bereitstellen und das Frontend auf eine statische Website pushen.

Der WordPress-Teil ist sehr einfach. In DevKinsta solltest du auf der Seite Site Info die Schaltfläche Push to Staging sehen. Du musst dich mit deinen Kinsta-Zugangsdaten anmelden, aber danach bist du fertig.

Was deine SvelteKit-Anwendung angeht, so ist auch das ganz einfach. Kinsta bietet kostenloses statisches Website-Hosting an, das für die meisten mit SvelteKit erstellten Anwendungen geeignet ist. So geht’s.

1. Pushe deine SvelteKit-Anwendung auf Bitbucket, GitHub oder GitLab.
2. Erstelle ein Kinsta-Konto und melde dich im MyKinsta-Dashboard an.
3. Melde dich bei dem Git-Konto deiner Wahl an und autorisiere Kinsta.
4. Klicke in MyKinsta auf Statische Websites und dann auf Website hinzufügen.
5. Wähle das Repository deiner Anwendung aus und füge die richtigen Build-Einstellungen hinzu.
6. Klicke auf Website erstellen.

Wenn du eine komplexe Anwendung erstellt hast, für die eine statische Site nicht ausreicht, solltest du stattdessen das Anwendungs-Hosting von Kinsta nutzen.

In jedem Fall ist deine Headless-Website jetzt bereitgestellt! Jetzt kannst du deine brandneue Headless WordPress-Anwendung vorführen.

Zusammenfassung

Headless WordPress ist heutzutage eine große Sache, aber es ist nicht immer einfach, es einzurichten. SvelteKit wurde speziell entwickelt, um die Webentwicklung sauberer und einfacher zu machen, und das Framework ist perfekt für die Einrichtung von Headless WordPress.

Jetzt, wo du weißt, wie du eine lokale WordPress-Instanz erstellst, mit SvelteKit arbeitest und auf Kinsta bereitstellst, bist du bereit, WordPress auf die nächste Stufe zu heben.

Egal, ob du eine statische Website oder eine dynamische Webanwendung erstellst, SvelteKit ist für diese Aufgabe bestens geeignet. Das AnwendungsHosting oder das kostenlose statische Hosting von Kinsta ist dank seiner blitzschnellen Infrastruktur, die auf Google Cloud und Cloudflare basiert, der beste Ort, um es zu hosten.

Hast du schon mit SvelteKit gearbeitet? Hält das Framework, was der Hype verspricht? Schreib uns deine Meinung in die Kommentare!

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).

• Webseite
• LinkedIn