Frontend Academy · Aula

SSG, SSR e ISR

SSG, SSR e ISR é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Três estratégias de renderização

O Next.js oferece três formas de renderizar páginas: SSG (geração de sites estáticos), SSR (renderização no lado do servidor) e ISR (regeneração estática incremental). Cada uma apresenta diferentes compromissos.

SSG — geração no momento da compilação

As páginas são geradas como HTML estático no momento da compilação e servidas a partir de uma CDN. É a entrega mais rápida possível. Ideal para: páginas de marketing, blogs e documentação.

SSG no Roteador de Páginas

Exporte getStaticProps a partir de uma página. A função é executada no momento da compilação e fornece propriedades ao 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 no Roteador de Aplicações

Por padrão, os Componentes de Servidor assíncronos buscam dados no momento da compilação. Use generateStaticParams para rotas 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 — geração por requisição

As páginas são renderizadas a cada requisição. Use quando o conteúdo for específico de cada usuário ou mudar com frequência demais para ser armazenado em cache.

SSR no Roteador de Páginas

Exporte getServerSideProps.

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

SSR no Roteador de Aplicações

Force a renderização por requisição com dynamic = 'force-dynamic' ou lendo cookies/cabeçalhos (o que desativa automaticamente o modo 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 — o melhor dos dois

ISR: sirva uma página estática, mas regenere-a em segundo plano a cada N segundos. Combine a velocidade do SSG com dados razoavelmente atualizados.

ISR no Roteador de Páginas

Adicione revalidate a getStaticProps.

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

ISR no Roteador de Aplicações

Use next: { revalidate: N } nas opções de fetch ou defina export const revalidate = N em uma 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} />;
}

Revalidação sob demanda

Acione a regeneração manualmente (por exemplo, a partir de um webhook de um CMS) sem esperar o intervalo de tempo.

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

Escolhendo a estratégia certa

Use SSG quando os dados mudarem raramente (marketing, documentação, blog). Use ISR quando os dados forem atualizados ocasionalmente (sites orientados por CMS, listagens de comércio eletrônico). Use SSR para conteúdo específico de cada usuário (painéis, páginas de conta).

Verificação rápida

O que o ISR (regeneração estática incremental) faz que o SSG puro não faz?

Recapitulação: SSG, SSR, ISR

SSG: no momento da compilação, mais rápido, conteúdo fixo. SSR: por requisição, dinâmico, mais lento. ISR: SSG + regeneração agendada em segundo plano — atualizado e rápido. O Roteador de Páginas usa getStaticProps/getServerSideProps. O Roteador de Aplicações usa Componentes de Servidor assíncronos com revalidação de fetch ou uma constante de revalidação no nível da página. revalidatePath/Tag para atualizações sob demanda.

Perguntas Frequentes

A aula “SSG, SSR e ISR” é grátis?

Sim — o texto completo de “SSG, SSR e ISR” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “SSG, SSR e ISR”?

Gerar páginas estaticamente durante a compilação, renderizá-las no servidor a cada pedido ou revalidar páginas armazenadas em cache segundo um agendamento com a Regeneração Estática Incremental. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “SSG, SSR e ISR”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Frontend Academy