Alojamiento de Sanity.io: mejores prácticas para la implementación y el rendimiento de un CMS sin interfaz

Entender la arquitectura de Sanity

Sanity funciona a través de tres componentes:
1. Content Lake: tu contenido, alojado por Sanity
2. Studio: la interfaz de edición basada en React
3. Tu interfaz de usuario: sitio web o aplicación que recupera el contenido a través de la API

Tú te encargas de alojar los componentes 2 y 3. Sanity se encarga del almacenamiento de contenidos y de la infraestructura de la API.

Instalación de Sanity Studio

# Opción 1: Alojamiento gratuito de Sanity

Correr sanity deploy y obtendrás una URL del tipo tu-proyecto.sanity.studio. Es gratis, no requiere configuración y funciona para la mayoría de los casos.

Limitaciones: No se admiten dominios personalizados sin proxy inverso, ni control de CDN.

# Opción 2: Alojamiento propio en un VPS

Build Studio: npm run build
Servir con Nginx /dist directorio
Se necesitan como mínimo 2 GB de RAM y un certificado SSL; no hace falta Node.js después de la compilación

# Opción 3:Cloudflare

Publica en estas plataformas para que tu contenido se distribuya automáticamente a través de una CDN global. Todas ofrecen planes gratuitos.

Alojar tu interfaz de usuario

# Next.js con generación estática (recomendado)

Usa getStaticProps con la regeneración estática incremental (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 };
}

Aloja tu sitio en Vercel (sin necesidad de configuración), en un VPS propio con Nginx o en Cloudflare .

# Aplicaciones de página única con React/Vue

En las aplicaciones renderizadas del lado del cliente, el contenido se carga después de que se ejecute el JavaScript. Déjalas en un alojamiento estático (Netlify, Vercel). No es lo ideal para el SEO, a menos que uses prerenderización.

Optimización de la API de Sanity

# Usa las proyecciones de GROQ

Recupera solo los campos necesarios para reducir el tamaño de la respuesta: // Mal: Recupera todo

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

// Good: Fetch specific fields

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

# Almacenamiento en caché del lado del cliente

Usa SWR o React Query para almacenar las respuestas en caché y revalidarlas en segundo plano, reduciendo así las llamadas a la API.

# CDN de imágenes de Sanity

Utiliza siempre el generador de URL para el redimensionamiento automático, la conversión de formatos y las URL adaptativas:

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

Webhooks para actualizaciones de contenido

Configura los webhooks de Sanity para que activen la revalidación del frontend cuando cambie el contenido. Revalidación bajo demanda de 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 });
}

Configura el webhook para que envíe una solicitud POST a tu punto final cuando se publique contenido.

Control del rendimiento

Supervisa el uso de la API de Sanity en el panel de control para ver el número de solicitudes, el ancho de banda y el rendimiento de las consultas. Optimiza las consultas que tardan más de 200 ms.

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

Optimización de costes

Plan gratuito de Sanity: 100 000 solicitudes API al mes, 10 GB de ancho de banda, 3 usuarios.

Para no sobrepasar los límites:
– Almacena en caché de forma agresiva tanto en el CDN como en el dispositivo del usuario
– Optimiza las imágenes con el CDN de Sanity
– Usa webhooks en lugar de consultas periódicas
– Implementa la paginación para conjuntos de datos grandes

Patrones de implementación habituales

# Patrón 1: Jamstack con Next.js

Estudio en Vercel/Netlify, frontend con Next.js en Vercel con ISR, Cloudflare para almacenamiento en caché adicional.
Ideal para: Sitios de marketing, blogs, documentación.

# Plantilla 2: Panel de control de SaaS

Studio alojado en un VPS, interfaz React SPA en el mismo VPS que se comunica con la API de Sanity.
Ideal para: herramientas internas, aplicaciones con autenticación.

# Patrón 3: Tiendas online con mucho tráfico

Alojamiento gratuito de Studio on Sanity; interfaz con Next.js en un servidor dedicado con caché Redis y páginas de productos con caché CDN.
Ideal para: catálogos de productos con un gran volumen de visitas.

Alojar Sanity.io es muy sencillo: implementa las compilaciones estáticas de Studio y las interfaces front-end que utilizan la API. Para la mayoría de los proyectos, implementa Studio en el alojamiento gratuito de Sanity o en Vercel, usa Next.js con ISR para el front-end, aprovecha el CDN de imágenes de Sanity y supervisa el uso de la API para no sobrepasar el límite del plan gratuito.

¿Necesitas un VPS para alojar Sanity Studio o Next.js por tu cuenta? Los planes VPS InMotion Hostingincluyen SSD , ancho de banda ilimitado y acceso root. Launch Assist te ayuda con la configuración de Nginx SSL.