i18n for SaaS: Architecture Patterns Compared

// messages/en/core.json
{
  "dashboard": {
    "title": "Dashboard",
    "welcome": "Welcome back, {name}!",
    "stats": {
      "users": "Active Users",
      "revenue": "Monthly Revenue"
    }
  }
}

// Usage in components
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>
  )
}

-- Dynamic content translation table
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)
);

-- Query with 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;

// Hybrid strategy: static for UI, dynamic for content
import * as m from '~/paraglide/messages.js'
import { useTranslations } from '~/lib/i18n-db'

function MarketingPage({ locale }) {
  // Static UI translations (build-time, tree-shakeable)
  const uiTitle = m.marketing_title()
  
  // Dynamic content translations (from database, real-time)
  const { data: heroContent } = useTranslations('hero_section', locale)
  
  return (
    <div>
      <h1>{uiTitle}</h1>
      <HeroSection content={heroContent} />
    </div>
  )
}