Server-side Rendering (SSR)

Core Idea

Também chamado "Dynamic Rendering": a página tem seu HTML gerado a cada request via getServerSideProps, útil para dados que mudam com frequência.

Key Concepts

• getServerSideProps: função async exportada de uma página; roda no servidor a cada request e retorna { props } para a página.

Code Examples

export default function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
  return { props: { data } }
}

• O que demonstra: fetch de dados frequentemente atualizados, executado em toda request.

Key Takeaways

1. getServerSideProps é sintaticamente parecida com getStaticProps, mas roda em toda request em vez de só no build.
2. Use quando o conteúdo não pode ser conhecido antecipadamente (dados que mudam a cada acesso).

Connects To

• getstaticprops: alternativa para dados conhecidos em build time.
• rendering: visão geral de quando escolher SSR vs SSG.