Frontend Academy · Lección

SSG, SSR e ISR

SSG, SSR e ISR es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Tres estrategias de renderizado

Next.js admite tres formas de renderizar páginas: SSG (generación de sitios estáticos), SSR (renderizado del lado del servidor) e ISR (regeneración estática incremental). Cada una presenta distintas ventajas y desventajas.

SSG — Generación durante la compilación

Las páginas se generan como HTML estático durante la compilación y se sirven desde una CDN. Es la entrega más rápida posible. Ideal para: páginas de marketing, blogs y documentación.

SSG en Pages Router

Exporte getStaticProps desde una página. La función se ejecuta durante la compilación y proporciona props al componente.

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

SSG en App Router

De forma predeterminada, los componentes de servidor asíncronos obtienen datos durante la compilación. Utilice generateStaticParams para las rutas dinámicas.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR — Generación por solicitud

Las páginas se renderizan en cada solicitud. Utilícelo cuando el contenido dependa del usuario o cambie con demasiada frecuencia para almacenarlo en caché.

SSR en Pages Router

Exporte getServerSideProps.

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

SSR en App Router

Fuerce el renderizado por solicitud con dynamic = 'force-dynamic' o leyendo cookies/encabezados, lo que desactiva automáticamente el renderizado estático.

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — Lo mejor de ambos mundos

ISR sirve una página estática, pero la regenera en segundo plano cada N segundos. Combina la velocidad de SSG con datos razonablemente actualizados.

ISR en Pages Router

Añada revalidate a getStaticProps.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

ISR en App Router

Utilice next: { revalidate: N } en las opciones de fetch o establezca export const revalidate = N en una página.

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

Regeneración bajo demanda

Active manualmente la regeneración, por ejemplo, desde un webhook de un CMS, sin esperar al intervalo de tiempo.

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

Elegir la estrategia adecuada

Utilice SSG cuando los datos cambien rara vez, como en marketing, documentación o blogs. Utilice ISR cuando los datos se actualicen ocasionalmente, como en sitios basados en un CMS o listados de comercio electrónico. Utilice SSR para contenido específico de cada usuario, como paneles y páginas de cuenta.

Comprobación rápida

¿Qué hace ISR (regeneración estática incremental) que no haga el SSG puro?

Resumen: SSG, SSR e ISR

SSG: durante la compilación, es el más rápido y ofrece contenido fijo. SSR: por solicitud, es dinámico y más lento. ISR: SSG más regeneración programada en segundo plano; ofrece datos razonablemente actualizados y rapidez. Pages Router utiliza getStaticProps/getServerSideProps. App Router utiliza componentes de servidor asíncronos con fetch revalidate o una constante revalidate a nivel de página. revalidatePath/Tag permite actualizaciones bajo demanda.

Preguntas frecuentes

¿La lección «SSG, SSR e ISR» es gratis?

Sí — el texto completo de «SSG, SSR e ISR» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «SSG, SSR e ISR»?

Genere páginas estáticamente durante la compilación, renderícelas en el servidor para cada solicitud o revalide páginas almacenadas en caché según un calendario mediante Incremental Static Regenerati… Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «SSG, SSR e ISR»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy