Hosting von Sanity.io: Best Practices für die Bereitstellung und Leistung von Headless-CMS

Die Architektur von Sanity verstehen

Sanity besteht aus drei Komponenten:
1. Content Lake: Deine Inhalte, gehostet von Sanity
2. Studio: Die auf React basierende Bearbeitungsoberfläche
3. Dein Frontend: Website/App, die Inhalte über die API abruft

Du hostest die Komponenten 2 und 3. Sanity kümmert sich um die Speicherung der Inhalte und die API-Infrastruktur.

Sanity Studio bereitstellen

# Option 1: Sanitys kostenloses Hosting

Los sanity deploy und du erhältst eine URL wie dein-projekt.sanity.studio. Kostenlos, keine Konfiguration erforderlich, funktioniert in den meisten Fällen.

Einschränkungen: Keine eigene Domain ohne Reverse-Proxy, keine CDN-Steuerung.

# Option 2: Selbst hosten auf einem VPS

Build Studio: npm run build
Mit Nginx bereitstellen Nginx /dist Verzeichnis
Erfordert mindestens 2 GB RAM, ein SSL-Zertifikat; Node.js wird nach der Erstellung nicht benötigt

# Option 3:Cloudflare

Stelle deine Inhalte automatisch auf diesen Plattformen bereit, um sie über ein globales CDN zu verbreiten. Alle bieten kostenlose Tarife an.

Dein Frontend hosten

# Next.js mit statischer Generierung (empfohlen)

Verwende `getStaticProps` mit Incremental Static Regeneration (ISR):

export async function getStaticProps({ params }) {
const post = await sanityClient.fetch(`*[_type == "post" && slug.current == $slug][0]`, { slug: params.slug });
return { props: { post }, revalidate: 60 };
}

Auf Vercel hosten (ohne Konfiguration), auf einem selbst gehosteten VPS mit Nginx oder auf Cloudflare .

# React/Vue-Single-Page-Apps

Bei clientseitig gerenderten Apps werden die Inhalte erst geladen, nachdem das JavaScript ausgeführt wurde. Stelle sie auf einem statischen Hosting-Dienst bereit (Netlify, Vercel). Nicht ideal für SEO, es sei denn, du nutzt Prerendering.

Optimierung der Sanity-API

# GROQ-Projektionen verwenden

Lade nur die benötigten Felder, um die Datenmenge zu reduzieren: // Schlecht: Lädt alles

const posts = await sanityClient.fetch(`*[_type == "post"]`);

// Good: Fetch specific fields

*[_type == "post"]{
title,
slug,
"authorName": author->name
}
`);

# Clientseitiges Caching

Verwende SWR oder React Query, um Antworten zwischenzuspeichern und im Hintergrund neu zu validieren, wodurch sich die Anzahl der API-Aufrufe verringert.

# Sanity’s Image CDN

Verwende immer den URL-Builder für automatische Größenanpassung, Formatkonvertierung und responsive URLs:

import imageUrlBuilder from '@sanity/image-url';
const builder = imageUrlBuilder(sanityClient);
<img src={builder.image(post.mainImage).width(800).url()} />

Webhooks für Inhaltsaktualisierungen

Konfiguriere Sanity-Webhooks so, dass sie bei Inhaltsänderungen eine erneute Validierung des Frontends auslösen. On-Demand-Validierung in Next.js: // pages/api/revalidate.js

export default async function handler(req, res) {
if (req.query.secret !== process.env.REVALIDATE_SECRET) {
return res.status(401).json({ message: 'Invalid token' });
}
await res.revalidate('/blog');
return res.json({ revalidated: true });
}

Konfiguriere den Webhook so, dass er bei der Veröffentlichung von Inhalten einen POST-Request an deinen Endpunkt sendet.

Leistungsüberwachung

Überwache die Nutzung der Sanity-API im Dashboard hinsichtlich Anfragenzahl, Bandbreite und Abfrageleistung. Optimiere Abfragen, die länger als 200 ms dauern.

Track frontend Core Web Vitals: LCP <2.5s, FID <100ms, CLS <0.1.

Kostenoptimierung

Sanity-Gratis-Tarif: 100.000 API-Anfragen/Monat, 10 GB Bandbreite, 3 Benutzer.

Um die Grenzen einzuhalten:
– Cache intensiv auf CDN- und Client-Ebene
– Bilder mit dem CDN von Sanity optimieren
– Webhooks statt Polling verwenden
– Paginierung für große Datensätze implementieren

Gängige Bereitstellungsmuster

# Muster 1: Jamstack mit Next.js

Studio auf Vercel/Netlify, Frontend Next.js auf Vercel mit ISR, Cloudflare für zusätzliches Caching.
Am besten geeignet für: Marketing-Websites, Blogs, Dokumentationen.

# Muster 2: SaaS-Dashboard

Studio wird selbst auf einem VPS gehostet, das Frontend ist eine React-SPA auf demselben VPS, die mit der Sanity-API kommuniziert.
Am besten geeignet für: Interne Tools, Anwendungen mit Authentifizierung.

# Muster 3: E-Commerce mit hohem Datenverkehr

Kostenloses Hosting von Studio on Sanity, Frontend mit Next.js auf einem dedizierten Server mit Redis-Cache, CDN-Caching für Produktseiten.
Ideal für: Produktkataloge mit hohem Besucheraufkommen.

Das Hosting von Sanity.io ist ganz einfach: Stelle statische Studio-Builds und API-nutzende Frontends bereit. Bei den meisten Projekten solltest du Studio auf dem kostenlosen Hosting von Sanity oder bei Vercel bereitstellen, Next.js mit ISR für das Frontend verwenden, das Image-CDN von Sanity nutzen und die API-Nutzung überwachen, um im Rahmen des kostenlosen Kontingents zu bleiben.

Brauchst du einen VPS für selbst gehostetes Sanity Studio oder Next.js? Die VPS-Tarife InMotion Hostingbieten SSD , unbegrenzte Bandbreite und Root-Zugriff. Der Launch Assist hilft dir bei der Einrichtung von Nginx SSL.