Rendering

Core Idea

Página de índice: explica os fundamentos de prerendering no Next.js (Pages Router) e serve de sumário para as subpáginas de SSR, SSG, Automatic Static Optimization e CSR.

Key Concepts

Prerendering: Next.js gera HTML por página antecipadamente, em vez de deixar tudo para o JS client-side; melhora performance e SEO.
Hydration: processo em que o JS mínimo associado ao HTML pré-renderizado roda no browser e torna a página interativa.
Static Generation: HTML gerado em build time, reutilizado a cada request.
Server-side Rendering: HTML gerado em cada request.
App híbrido: Next.js permite misturar Static Generation e SSR por página no mesmo projeto.

Reference Tables

Forma de prerendering	Quando o HTML é gerado
Static Generation	build time (`next build`), reutilizado por request
Server-side Rendering	a cada request

Key Takeaways

Recomendação padrão: preferir Static Generation sobre SSR por performance (cacheável em CDN).
Data fetching client-side pode complementar tanto SSG quanto SSR para partes dinâmicas da página.
Esta página é só um índice; o conteúdo técnico vive em SSR, SSG, Automatic Static Optimization e CSR.

Connects To

server-side-rendering-ssr: detalhe de getServerSideProps.
static-site-generation-ssg: detalhe de getStaticProps/getStaticPaths.
automatic-static-optimization: como o Next.js escolhe automaticamente entre estático e SSR.
client-side-rendering-csr: fetching de dados inteiramente no client.