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 frontend: página web o aplicación que recupera contenido a través de una 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
Sírvelo con un « NGINX » de /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: Páginas de Vercel/Netlify/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)

Uso getStaticProps con 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 };
}

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 Pages.

Aplicaciones de una sola página 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"]`);

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

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

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

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 pasarte de la raya:

• Almacena en caché de forma intensiva tanto en la CDN como en el dispositivo del usuario
• Optimiza las imágenes con la CDN de Sanity
• Usa webhooks en lugar de la consulta periódica
• Implementa la paginación para conjuntos de datos grandes

Patrones de implementación habituales

Patrón 1: Jamstack con Next.js

Studio en Vercel/Netlify, frontend con Next.js en Vercel con ISR, Cloudflare para un almacenamiento en caché adicional.

Ideal para: Páginas de marketing, blogs y documentación.

Plantilla 2: Panel de control de SaaS

Studio alojado en un VPS propio; la interfaz de usuario es una aplicación SPA de React en el mismo VPS que se comunica con la API de Sanity.

Ideal para: herramientas internas, aplicaciones autenticadas.

Modelo 3: Comercio electrónico con mucho tráfico

Alojamiento gratuito de Studio on Sanity; frontend con Next.js en un servidor dedicado con caché Redis; páginas de productos con caché CDN.

Ideal para: Catálogos de productos con un gran volumen de lecturas.

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 Sanity Studio o Next.js autohospedados? Los planes VPS de InMotion Hostingincluyen SSD almacenamiento, NGINX, ancho de banda ilimitado y acceso root.