Automatic Static Optimization

Core Idea

Next.js determina automaticamente se uma página pode ser estática (sem getServerSideProps/getInitialProps) e a prerenderiza como HTML, permitindo apps híbridos sem configuração manual.

Key Concepts

• Detecção automática: ausência de getServerSideProps e getInitialProps na página = candidata a otimização estática.
• App híbrido: mesmo build pode conter páginas server-rendered e estaticamente otimizadas.
• router.isReady: campo em next/router para saber quando query está completamente populado após hidratação.
• asPath: valor de next/router que só é conhecido no client em páginas estaticamente otimizadas; usar antes de isReady === true pode causar mismatch.

Code Examples

.next/server/pages/about.html

• O que demonstra: página estaticamente otimizada gera .html no build.

.next/server/pages/about.js

• O que demonstra: adicionar getServerSideProps faz a mesma página virar .js (renderizada por request) em vez de .html.

Anti-patterns

• Usar asPath como prop antes de router.isReady: pode causar mismatch de hidratação em páginas estaticamente otimizadas, já que asPath só é conhecido no client.
• _app com getInitialProps: desliga a otimização automática em páginas que não usam getStaticProps.
• Assumir ctx.req definido em _document com getInitialProps: ctx.req é undefined em páginas prerenderizadas; sempre checar antes de assumir SSR.

Key Takeaways

1. Página estática ainda hidrata e fica totalmente reativa no client.
2. query vem vazio durante o prerender e é atualizado após hidratação em: rotas dinâmicas, query na URL, ou rewrites configurados.
3. Use router.isReady para distinguir se query já está completo.

Connects To

• custom-app: getInitialProps no App é a principal forma de desligar essa otimização.
• custom-document: cuidado com ctx.req undefined em páginas otimizadas.
• static-site-generation-ssg / server-side-rendering-ssr: as duas formas de prerendering entre as quais o Next.js escolhe automaticamente.