# Backend-Technologien

# Mein Weg zu PayloadCMS: Backend-Vergleich aus der Praxis

In meinem Projekt stand ich vor der Aufgabe, ein modernes CMS aufzusetzen – mit möglichst viel Flexibilität, einem angenehmen Workflow und gutem API-Zugriff. Hier dokumentiere ich meine Evaluierung verschiedener Backend-Technologien und Frameworks – und wie ich schließlich bei <span class="s2">**PayloadCMS**</span> gelandet bin.

[![Übersicht.png](https://wiki.kleinform.at/uploads/images/gallery/2025-04/scaled-1680-/963qIpU63EgeBb34-ubersicht.png)](https://wiki.kleinform.at/uploads/images/gallery/2025-04/963qIpU63EgeBb34-ubersicht.png)

### Laravel (PHP) – Stark, aber überdimensioniert und etwas altbacken?

**Was mir gefallen hat:** Laravel ist mächtig. Besonders das Eloquent ORM und das Ecosystem (Jobs, Queues, Policies etc.) bieten viele Features direkt „out of the box“. Mit <span class="s2">**Filament**</span> steht zudem ein sehr starkes Admin-Panel-Toolkit zur Verfügung.

**Aber:**

- Für ein CMS war mir das Setup oft zu schwergewichtig.
- PHP ist für viele Dinge okay – aber die Arbeit mit JSON, REST oder modernen Frontend-Workflows wirkt oft sperriger als bei node-basierten Lösungen.
- Auch das Hosting (z. B. auf Vercel oder Netlify) ist nicht ganz so smooth wie mit JavaScript-Stacks.

**Fazit:** Ein tolles Framework, aber für mein Ziel „Headless CMS mit modernem JS-Frontend“ war es nicht die erste Wahl.

### SvelteKit – Elegantes Frontend, aber keine komplexen Backend-Lösungen

**Was ich mochte:** SvelteKit ist superschnell, modern und macht Spaß. Besonders die neue V5 ist sehr spannend für reaktive Frontends. Die Integration mit dem Node-Adapter ist einfach – und fürs <span class="s2">**Frontend**</span> sehe ich darin meine langfristige Lösung.

**Was mir fehlte:**

- Komplexere Backend-Funktionalität wie Rollen, dynamische Models, Auth oder Admin-Panels fehlen oder müssen selbst gebaut werden.
- Es gibt zwar ein paar Tools (z. B. Lucid, Prisma), aber der Ökosystem-Vergleich mit React zeigt: weniger Auswahl.
- Kein echtes CMS-Feeling.

**Fazit:** Perfekt für Frontends. Als CMS-Backend nicht geeignet.

### Strapi – Gute API, aber UI nicht meins

**Pluspunkte:**

- Sehr reifes Headless CMS auf Basis von Node.js.
- Gute REST- und GraphQL-Schnittstellen.
- Rollen-/Rechtemanagement, dynamische Content-Types, einfache Auth.

**Aber:**

- Das Admin-Panel wirkt auf mich visuell und UX-technisch nicht ansprechend.
- Die Konfiguration ist teilweise uneinheitlich (Code vs. UI).
- Etwas schwergewichtig für kleinere Projekte.

**Fazit:** Technisch solide – aber ich habe mich im Admin nicht wohlgefühlt.

### PayloadCMS

**Warum ich geblieben bin:**

- Komplett in TypeScript.
- Das Admin-Panel ist schnell, intuitiv und sehr anpassbar.
- Content-Modeling über Code (statt Click UI).
- Lokale Entwicklung, gute Dokumentation, offene Architektur.
- Built-in Auth, Access Control, Dateiupload, Versioning etc.
- Ideal für Entwickler:innen.

**Fazit:** <span class="s2">**PayloadCMS**</span> ist genau das, was ich gesucht habe: Entwicklerfreundlich, modern, headless und API-zentriert. Es passt gut zu meinem Setup mit SvelteKit als Frontend – und ist damit mein Favorit für das Projekt.

### Beispiel-Systemarchitektur

```
+------------------------------+
|       Frontend (SvelteKit)  |
|------------------------------|
|  - SvelteKit App             |
|  - Node Adapter              |
|    (für API-Proxy)           |
+-------------+----------------+
              |
              | REST / GraphQL
              v
+------------------------------+
|      Backend (PayloadCMS)    |
|------------------------------|
|  - Payload Server (Next.js)  |
|  - Access Control & Auth     |
|  - Custom Hooks / Logic      |
|  - ORM / Content Models      |
|  - File Uploads / Admin UI   |
+-------------+----------------+
              |
              v
+------------------------------+
|          MongoDB             |
|------------------------------|
|  - Persistente Speicherung   |
|    von Inhalten & Usern      |
+------------------------------+
```

### Weiterführende Ressourcen

- [PayloadCMS Docs](https://payloadcms.com/docs)
- [SvelteKit V5 Docs](https://svelte.dev/docs)
- [Filament für Laravel](https://filamentphp.com)

# PayloadCMS

<span class="s1">**PayloadCMS**</span> ist ein modernes, Headless CMS, das vollständig auf <span class="s1">**Node.js**</span> basiert und speziell für Entwickler:innen konzipiert ist. Es kombiniert ein leistungsfähiges Admin-Panel mit einem *code-first*-Ansatz, wodurch Inhalte, Strukturen und Logiken direkt im Code definiert werden können.

### Überblick

<table id="bkmrk-eigenschaft-beschrei"><thead><tr><th>**Eigenschaft**

</th><th>**Beschreibung**

</th></tr></thead><tbody><tr><td>CMS-Typ

</td><td>Headless CMS

</td></tr><tr><td>Backend

</td><td>Node.js + Express

</td></tr><tr><td>Sprache

</td><td>TypeScript (auch JavaScript möglich)

</td></tr><tr><td>API-Schnittstellen

</td><td>REST und GraphQL

</td></tr><tr><td>Admin-Oberfläche

</td><td>Automatisch generiert aus dem Code

</td></tr><tr><td>Authentifizierung

</td><td>Integriert (JWT, Sessions, Role-based Access)

</td></tr><tr><td>Datenbanken

</td><td>MongoDB (Standard), <span class="s1">**PostgreSQL / SQLite**</span> via Kysely (experimentell)

</td></tr><tr><td>ORM/Query Builder

</td><td>Mongoose (MongoDB) / Kysely (SQL-DBs wie SQLite)

</td></tr></tbody></table>

#### Code-First Schema

Alle Collections (Inhaltstypen) werden im Code als JavaScript/TypeScript-Objekte definiert.

```
import { CollectionConfig } from 'payload/types';

const Posts: CollectionConfig = {
  slug: 'posts',
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'content', type: 'richText' },
  ],
};

export default Posts;
```

### Authentifizierung &amp; Rollen

- Integrierte Benutzerverwaltung
- Rollenbasierte Zugriffskontrolle (Access Control Policies)
- Auth-Collection konfigurierbar

### Dateiuploads &amp; Medien

- Unterstützung für File-Uploads (lokal oder via Cloud)
- Optimierung und Vorschau automatisch im Admin-Panel

### Hooks &amp; Middleware

- Asynchrone Hooks vor/nach Aktionen
- Business-Logik z. B. bei <span class="s1">beforeChange</span>, <span class="s1">afterDelete</span>, etc.

### Mehrsprachigkeit

- Unterstützung für i18n (lokalisierte Inhalte)

### Datenbankunterstützung

<table id="bkmrk-datenbank-standard%3F-"><thead><tr><th>**Datenbank**

</th><th>**Standard?**

</th><th>**ORM / Query Layer**

</th><th>**Hinweise**

</th></tr></thead><tbody><tr><td>MongoDB

</td><td>✅

</td><td>Mongoose

</td><td>Reif &amp; empfohlen

</td></tr><tr><td>SQLite

</td><td>🔄 (ab 1.12+)

</td><td>Kysely

</td><td>Gut für lokale Dev

</td></tr><tr><td>PostgreSQL

</td><td>🔄 (ab 1.12+)

</td><td>Kysely

</td><td>Für produktive SQL-Setups

</td></tr></tbody></table>

# Erweiterung des Beispielprojekts: Vier Gewinnt Remote

In diesem Artikel erweitern wir unser Beispielprojekt um ein Backend, damit Spieler auch online gegeneinander spielen können.