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 eine 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: Das kostenlose Hosting von Sanity

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
Dazu passt „ NGINX “ von /dist Verzeichnis

Erfordert mindestens 2 GB RAM, ein SSL-Zertifikat; Node.js wird nach der Erstellung nicht benötigt

Option 3: Vercel/Netlify/Cloudflare -Seiten

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)

Verwendung getStaticProps mit inkrementeller statischer 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 };
}

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 (keine Konfiguration erforderlich), auf einem selbst gehosteten VPS mit NGINX oder auf Cloudflare Pages.

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"]`);

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

// Good: Fetch specific fields

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

*[_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()} />

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 });
}

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 im Rahmen zu bleiben:

• Cache intensiv auf CDN- und Client-Ebene nutzen
• Bilder mit dem CDN von Sanity optimieren
• Verwende Webhooks statt Polling
• Paginierung für große Datensätze implementieren

Gängige Bereitstellungsmuster

Muster 1: Jamstack mit Next.js

Studio auf Vercel/Netlify, Frontend mit Next.js auf Vercel und 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 React-SPA-Frontend läuft auf demselben VPS und kommuniziert mit der Sanity-API.

Am besten geeignet für: Interne Tools, authentifizierte Anwendungen.

Szenario 3: E-Commerce mit hohem Datenverkehr

Kostenloses Hosting bei Studio on Sanity, Frontend mit Next.js auf einem dedizierten Server mit Redis-Cache, CDN-Caching für Produktseiten.

Am besten geeignet für: Produktkataloge mit hohem Leseaufkommen.

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 ein selbst gehostetes Sanity Studio oder Next.js? Die VPS-Tarife von InMotion Hostingumfassen SSD Speicherplatz, NGINX, unbegrenzte Bandbreite und Root-Zugriff.