i18n SaaS: Architekturmuster im Vergleich

Kurzfassung: Die Wahl der richtigen i18n-Architektur – JSON-basiert, CMS-gesteuert, datenbankbasiert oder hybrid – bestimmt Ihren Übersetzungsworkflow, die Performance beim Build und die Skalierbarkeit. Dieser Guide vergleicht jedes Muster für SaaS-Anwendungen. Praxisbeispiele auf tanstackship.com.

Einleitung

Internationalisierung ist nicht nur das Einkapseln von Strings in t(). Für SaaS-Produkte beeinflusst die i18n-Architektur alles: von der Build-Performance über die Workflows des Übersetzungsteams bis hin zum Management dynamischer Inhalte. Das Verständnis der Spracherkennung ist dabei ebenfalls entscheidend – unser Guide zu Spracherkennungsstrategien behandelt dieses Thema ausführlich.

Übersicht der Architekturmuster

JSON-basiertes i18n (Paraglide.js)

// Nachrichten/en/core.json
{
  "dashboard": {
    "title": "Dashboard",
    "welcome": "Willkommen zurück, {name}!",
    "stats": {
      "users": "Aktive Benutzer",
      "revenue": "Monatlicher Umsatz"
    }
  }
}

// Nutzung in Komponenten
import * as m from '~/paraglide/messages.js'

function Dashboard() {
  return (
    <div>
      <h1>{m.dashboard_title()}</h1>
      <p>{m.dashboard_welcome({ name: user.name })}</p>
    </div>
  )
}

JSON-basiertes i18n ist ideal für statische UI-Inhalte. Paraglide.js kompiliert Nachrichten in tree-shakeable JavaScript und erzeugt so i18n ohne Laufzeit-Overhead.

Datenbankgestütztes i18n

-- Tabelle für dynamische Inhaltstranslation
CREATE TABLE translations (
  id TEXT PRIMARY KEY,
  locale TEXT NOT NULL,
  namespace TEXT NOT NULL,
  key TEXT NOT NULL,
  value TEXT NOT NULL,
  is_auto_translated BOOLEAN DEFAULT false,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW(),
  UNIQUE(locale, namespace, key)
);

-- Abfrage mit Fallback
SELECT COALESCE(t.value, f.value) as translated_value
FROM (
  SELECT value FROM translations
  WHERE key = 'welcome_message' AND locale = 'de'
) t
FULL JOIN (
  SELECT value FROM translations
  WHERE key = 'welcome_message' AND locale = 'en'
) f ON true;

Datenbankgestütztes i18n ist notwendig für benutzergenerierte Inhalte, Blogbeiträge und dynamische Marketing-Seiten, die Non-Developer bearbeiten können. Für eine tiefergehende Betrachtung von Schema-Mustern, lesen Sie unseren Guide zu Multi-Language-Datenbankdesign für SaaS.

Hybrides Pattern (Empfohlen für SaaS)

// Hybridstrategie: statisch für UI, dynamisch für Inhalte
import * as m from '~/paraglide/messages.js'
import { useTranslations } from '~/lib/i18n-db'

function MarketingPage({ locale }) {
  // Statische UI-Übersetzungen (Build-Zeit, tree-shakeable)
  const uiTitle = m.marketing_title()
  
  // Dynamische Inhaltsübersetzungen (aus Datenbank, Echtzeit)
  const { data: heroContent } = useTranslations('hero_section', locale)
  
  return (
    <div>
      <h1>{uiTitle}</h1>
      <HeroSection content={heroContent} />
    </div>
  )
}

Leistungsvergleich

Fazit

Verwenden Sie eine hybride Architektur: statische JSON-Übersetzungen (kompiliert mit Paraglide.js) für UI-Strings und ein datenbankgestütztes Übersetzungssystem für dynamische Inhalte. Das gibt Entwicklern schnelle, typsichere Übersetzungen für das UI und ermöglicht es gleichzeitig Nicht-Technikern, Inhaltstranslationen in Echtzeit zu verwalten.

Für einen Vergleich von Paraglide.js mit react-i18next, lesen Sie react-i18next vs Paraglide.js. Falls Sie mehrsprachige E-Mail-Unterstützung benötigen, deckt unser Guide zu Multi-Language-E-Mail-Vorlagen für SaaS die Vorlagenarchitektur und Fallback-Strategien ab.