getServerSideProps() atualmente em 2025 | Next.js: explorando o framework

Não há mais a necessidade de utilizar o getServerSideProps() para carregar o conteúdo da página no HTML (melhorando assim o SEO). Hoje o NextJS faz isso automaticamente.

Pelo que pesquisei isso foi melhorado a partir do NextJS 13+. Anteriormente o NextJS era client-side por padrão com Pages Router. Mas atualmente o NextJS é server-side por padrão com App Router. Dessa maneira não precisamos mais utilizar getServerSideProps() com a finalidade de atualizar o conteúdo no HTML.

Faça o teste!!

Exemplo Pages Router (client-side por padrão):

// pages/posts.tsx
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { posts },
  }
}

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  )
}

Exemplo App Router (server-side por padrão):

// app/posts/page.tsx
export default async function Posts() {
  const res = await fetch('https://api.example.com/posts', { cache: 'force-cache' })
  const posts = await res.json()

  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  )
}

Olá Carlos.
Tudo bem?
Sua explicação está 100% correta e atualizada para o estado do Next.js em 2025.
Vamos ver o que mudou e por que o getServerSideProps() praticamente saiu de cena nas versões recentes do framework.
No modelo antigo do Pages Router, as páginas em pages/ eram client-side por padrão.
Ou seja, o conteúdo inicial era renderizado no cliente (navegador) e ruim para SEO e para o Time to Content.
Para resolver isso, usava-se:

getStaticProps() → Geração estática no build.
getServerSideProps() → Renderização no servidor a cada requisição.

Exemplo clássico:

// pages/posts.tsx
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return { props: { posts } }
}

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  )
}

Com o App Router (app/ directory), tudo mudou:

Os componentes do servidor são o padrão (Server Components).
Ou seja, o conteúdo já é renderizado no servidor automaticamente — sem precisar de getServerSideProps.
A função fetch() agora é inteligente, controlando cache e revalidação diretamente pelos parâmetros.

Exemplo equivalente moderno:

// app/posts/page.tsx
export default async function Posts() {
  const res = await fetch('https://api.example.com/posts', { cache: 'force-cache' })
  const posts = await res.json()

  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  )
}

No App Router, você controla o comportamento do servidor diretamente pelo fetch():

{ cache: 'force-cache' } → Geração estática (similar ao getStaticProps)
{ cache: 'no-store' } → Requisição a cada acesso (similar ao getServerSideProps)
{ next: { revalidate: 60 } } → Revalidação incremental (similar ao getStaticProps + ISR)

Exemplo com revalidação:

export default async function Posts() {
  const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } })
  const posts = await res.json()

  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>
}

Você está totalmente certo e não precisamos mais de getServerSideProps() no App Router, porque o Next.js 13+ renderiza tudo no servidor por padrão**.
O controle agora é muito mais simples, direto e flexível.
Realmente muito bom.
Obrigado por compartilhar.