SSG vs SSR en Astro

Comprende las diferencias fundamentales entre renderizado estático y dinámico, y cuál usar para tu proyecto

¿Cuándo se genera el HTML?

La diferencia principal entre SSG y SSR es cuándo se genera el HTML de tu página:

SSG (Static Site Generation)

HTML generado en build time (cuando ejecutas npm run build)

El servidor solo sirve archivos HTML estáticos ya generados.

SSR (Server-Side Rendering)

HTML generado en request time (en cada petición del usuario)

El servidor ejecuta código y genera HTML fresco para cada visita.

¿Puedo usar APIs con SSG?

¡SÍ! Puedes usar JavaScript vanilla con fetch() en el navegador para consumir APIs.

SSG + fetch() del cliente es la forma más común y eficiente:

• Página carga ultra rápido (HTML estático)
• Datos se cargan después en el navegador
• Perfecta para 90% de los casos

1. Comparación Directa

Criterio	SSG	SSR
Velocidad de carga	⚡⚡⚡⚡⚡	⚡⚡⚡
Costo hosting	Gratis	SERVELESS GASTO € , en VPS Gasto Computacion
SEO	Excelente	Excelente
Datos en HTML inicial	No	Sí
Autenticación/Sesiones	No	Sí
Escalabilidad	Infinita	Limitada
Complejidad	Simple	Media

2. Ventajas de SSG

Rendimiento Superior

HTML ya generado = carga instantánea. No hay procesamiento en el servidor.

Hosting Gratuito

Netlify, Vercel, GitHub Pages. Solo archivos estáticos, sin servidor Node.js.

SEO Perfecto

Google ve el HTML completo inmediatamente. Ideal para landing pages.

Escalabilidad Infinita

1 usuario o 1 millón = mismo rendimiento. CDN global sin esfuerzo.

3. Ventajas de SSR

Autenticación Nativa

Acceso a cookies, sesiones y protección de rutas en el servidor.

Datos en HTML Inicial

Contenido personalizado por usuario directamente en el HTML.

Tiempo Real

Datos siempre actualizados. Perfecto para dashboards y aplicaciones.

Control Total

Procesamiento server-side, acceso a bases de datos, lógica compleja.

4. Ejemplos Prácticos

✅ SSG + JavaScript (Recomendado 90% casos)

SSG + fetch() - Patrón recomendadoastro

1---
2// productos.astro - SSG (por defecto)
3// HTML se genera en build time
4---
5 
6<html>
7<body>
8  <h1>Catálogo de Productos</h1>
9  <div id="productos">Cargando...</div>
10 
11  <script>
12    // JavaScript se ejecuta en el NAVEGADOR
13    async function cargarProductos() {
14      const response = await fetch('https://api.tutienda.com/productos');
15      const productos = await response.json();
16 
17      const contenedor = document.getElementById('productos');
18      contenedor.innerHTML = productos.map(p =>
19        '<div>' +
20          '<h3>' + p.nombre + '</h3>' +
21          '<p>Precio: $' + p.precio + '</p>' +
22          '<button>Añadir al carrito</button>' +
23        '</div>'
24      ).join('');
25    }
26 
27    // CRUD completo desde el cliente
28    async function crearProducto(producto) {
29      await fetch('https://api.tutienda.com/productos', {
30        method: 'POST',
31        headers: { 'Content-Type': 'application/json' },
32        body: JSON.stringify(producto)
33      });
34      cargarProductos(); // Recargar lista
35    }
36 
37    async function eliminarProducto(id) {
38      await fetch('https://api.tutienda.com/productos/' + id, {
39        method: 'DELETE'
40      });
41      cargarProductos(); // Recargar lista
42    }
43 
44    cargarProductos();
45  </script>
46</body>
47</html>

✅ Ventajas: Página carga instantáneamente (SSG), datos se actualizan en tiempo real (fetch), hosting gratuito, escalabilidad infinita.

🔒 SSR con Autenticación

SSR - Dashboard con autenticación

---
// dashboard.astro - SSR
export const prerender = false; // Habilita SSR

// Código se ejecuta en el SERVIDOR en cada petición
const user = Astro.locals.user;

// Proteger ruta
if (!user) {
  return Astro.redirect('/login');
}

// Obtener datos personalizados del usuario
const response = await fetch('https://api.app.com/user/' + user.id);
const userData = await response.json();
---

<html>
<body>
  <h1>Bienvenido {user.name}</h1>

  <div class="stats">
    <p>Tus ventas: ${userData.sales}</p>
    <p>Pedidos pendientes: {userData.orders}</p>
    <p>Última compra: {userData.lastPurchase}</p>
  </div>

  <!-- Contenido personalizado para este usuario -->
  <div class="recommendations">
    {userData.recommendations.map(item => (
      <div>{item.name}</div>
    ))}
  </div>
</body>
</html>

📌 Cuándo usar: Necesitas autenticación, datos personalizados por usuario, o protección de rutas.

⚙️ Configuración necesaria: SSR requiere instalar un adaptador según tu plataforma de hosting:

• @astrojs/vercel - Si despliegas en Vercel
• @astrojs/netlify - Si despliegas en Netlify
• @astrojs/node - Si usas tu propio servidor Node.js/VPS

(Ver sección "Configuración Técnica" más abajo para detalles)

5. ¿Cuál Elegir?

🎯 Guía de Decisión Rápida

Usa SSG si:

• Tu sitio es un blog, documentación, landing page o portafolio
• Necesitas máximo rendimiento y SEO
• Puedes usar fetch() en JavaScript para datos dinámicos
• Quieres hosting gratuito
• No necesitas autenticación server-side

Usa SSR si:

• Necesitas autenticación y sesiones de usuario
• Los datos DEBEN estar en el HTML inicial (SEO crítico)
• Contenido completamente personalizado por usuario
• Dashboard privado o aplicación SaaS
• Necesitas proteger rutas o contenido sensible

💡 Estrategia Híbrida (Lo mejor):

Astro permite mezclar SSG y SSR en el mismo proyecto. Usa SSG para páginas públicas y SSR solo para rutas que lo necesiten.

6. Configuración Técnica

Habilitar SSR en una página

// src/pages/dashboard.astro

export const prerender = false;

// Por defecto: prerender = true (SSG)

⚠️ Importante: Para usar SSR en producción, debes instalar un adaptador:

npm install @astrojs/vercel

// astro.config.mjs

import vercel from '@astrojs/vercel/serverless';

export default defineConfig({ adapter: vercel() });

✅ Recomendación para este curso: Usa SSG + fetch() en JavaScript. Es más simple, más rápido, y cubre el 90% de casos de uso.

🎓 Conclusión

SSG es la opción por defecto y recomendada para la mayoría de proyectos. Es más rápido, más barato, y más fácil de escalar.

SSG + JavaScript con fetch() te da lo mejor de ambos mundos: páginas ultra rápidas con datos dinámicos.

SSR solo cuando realmente lo necesites: autenticación, contenido personalizado crítico, o protección de rutas.

¡Felicidades! Has completado el curso básico de Astro. Ahora puedes crear sitios web modernos, rápidos y optimizados con la estrategia de renderizado correcta.

Anterior: Astro.params y request

Siguiente: Fetch y API REST