Elegir SSR, SSG o ISR para cada ruta de una app Next.js
Decide la estrategia de renderizado y caché de cada ruta de tu proyecto Next.js (estático, ISR, dinámico, streaming o cliente) con una tabla razonada, código de ejemplo y cómo verificarlo. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 4 variables personalizables y se copia gratis en un clic.
Avanzado · Texto · Pendiente de revisión editorial
Prompt
Actúa como arquitecto especializado en Next.js App Router, rendimiento web y SEO técnico.
Contexto:
- Proyecto: {{proyecto}}
- Rutas y frescura de los datos: {{rutas}}
- Alojamiento: {{alojamiento}}
- Versión de Next.js: {{version_next}}
Si falta información decisiva (qué rutas dependen de la sesión del usuario, cada cuánto cambian los datos, si el contenido viene de un CMS con webhooks), pregúntamela antes de decidir.
Entregables:
1. Tabla por ruta: estrategia (estática en build, estática con revalidación por tiempo o bajo demanda, dinámica por petición, streaming con Suspense, carga en cliente), motivo, origen de los datos, impacto en SEO y en el tiempo hasta el primer byte.
2. Cómo invalidar el contenido en cada caso (revalidación por tiempo, revalidatePath o revalidateTag desde un webhook) y qué ocurre si la revalidación falla.
3. Qué hace que una ruta pase a ser dinámica sin querer (cookies, cabeceras, parámetros de búsqueda, fetch sin caché) y cómo aislar la parte personalizada para que el resto siga siendo estático.
4. Código de ejemplo breve para dos o tres rutas representativas.
5. Limitaciones de {{alojamiento}} que afectan a la decisión (por ejemplo, la exportación estática no permite renderizado por petición).
6. Cómo comprobarlo: qué muestra la salida de `next build` para cada ruta y qué cabeceras de caché revisar en producción.
Restricciones:
- El comportamiento de caché por defecto ha cambiado entre versiones de Next.js: indica qué supones para {{version_next}} y recomienda contrastarlo con la documentación oficial de esa versión.
- No inventes métricas de rendimiento; si estimas algo, márcalo como estimación.
- Prefiere lo estático siempre que los requisitos de frescura lo permitan.
Formato: tabla principal, secciones breves por tema y una lista final de riesgos.Cómo usarlo
- Enumera tus rutas reales con la frecuencia con la que cambia su contenido y si dependen del usuario. 2. Indica dónde despliegas y la versión exacta de Next.js. 3. Aplica la tabla y valida con la salida de next build antes de publicar.
Ejemplo de uso
Proyecto: tienda de muebles con blog · Rutas: /, /productos/[slug] (precio cambia a diario), /blog/[slug], /cuenta (privada) · Alojamiento: Vercel · Versión: Next.js 15.
Resultado de ejemplo
Supuesto: Next.js 15, donde fetch ya no se cachea por defecto. Confírmalo en la documentación oficial de tu versión.
Estrategia por ruta
| Ruta | Estrategia | Motivo | Invalidación |
|---|---|---|---|
/ | Estática con revalidación | Cambia una vez por semana | revalidateTag('home') desde el CMS |
/productos/[slug] | Estática + ISR; precio y stock en un bloque con Suspense | El SEO necesita HTML rápido; el stock cambia a diario | revalidateTag('producto:slug') al actualizar el inventario |
/blog/[slug] | Estática con generateStaticParams | Casi nunca cambia | revalidatePath desde el webhook del CMS |
/cuenta | Dinámica por petición | Privada y por usuario; lee cookies | No se cachea |
Qué vuelve dinámica una ruta sin querer
- Leer
cookies()oheaders()en un layout compartido: arrastra todas las rutas hijas. - Usar
searchParamsen la página de producto para un filtro menor.
Solución: aislar lo personalizado (cesta, saludo) en un componente de cliente o en un bloque con Suspense para que el resto siga siendo estático.
Cómo verificarlo
En la salida de next build, cada ruta aparece marcada como estática (○), SSG (●) o dinámica (ƒ). Si /productos/[slug] sale como ƒ, algo está leyendo datos de la petición…
Datos clave
- Categoría
- Programación y desarrollo · Next.js
- Tipo de resultado
- Texto
- Nivel
- Avanzado
- Pensado para
- ChatGPT, Claude, Gemini y Microsoft Copilot
- Verificado en
- Pendiente de verificación editorial
- Variables
- Proyecto, Rutas y frescura de los datos, Alojamiento y Versión de Next.js
- Idioma
- Español
- Precio
- Gratis, sin registro
- Actualizado
- 07/11/2026
Preguntas frecuentes
¿Qué diferencia hay entre SSG e ISR?
Con SSG la página se genera en el build y no cambia hasta el siguiente despliegue. Con ISR se sirve estática, pero se regenera tras un intervalo o cuando la invalidas, sin redeplegar.
¿Renderizar en el servidor es siempre mejor para SEO?
Lo importante para SEO es que el HTML inicial contenga el contenido. Una página estática o con ISR lo consigue igual que SSR y suele ser más rápida y barata de servir.
¿Por qué una ruta se vuelve dinámica sin que yo lo quiera?
Normalmente porque lee cookies, cabeceras o parámetros de búsqueda, o hace un fetch sin caché. El prompt te ayuda a localizar esas llamadas y aislarlas.
¿Para qué sirve este prompt?
Decide la estrategia de renderizado y caché de cada ruta de tu proyecto Next.js (estático, ISR, dinámico, streaming o cliente) con una tabla razonada, código de ejemplo y cómo verificarlo.
¿Con qué herramientas de IA funciona?
Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.
¿Cómo personalizo el prompt?
Pulsa «Personalizar» y rellena las variables (Proyecto, Rutas y frescura de los datos, Alojamiento y Versión de Next.js). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.
¿Necesito experiencia para usarlo?
Es de nivel avanzado: está pensado para personas con experiencia en el tema que sepan evaluar y ajustar el resultado.
¿Este prompt es gratis?
Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.
¿Puedo fiarme del resultado de la IA?
Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.