getServerSideProps

getServerSideProps es una función de Next.js que se puede utilizar para obtener datos y renderizar el contenido de una página en el momento de la solicitud.

Ejemplo

Puedes usar getServerSideProps exportándolo desde un Componente de Página. El siguiente ejemplo muestra cómo puedes obtener datos de una API de terceros en getServerSideProps, y pasar los datos a la página como props:

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // Obtener datos de una API externa
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Pasar datos a la página mediante props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

¿Cuándo debería usar getServerSideProps?

Deberías usar getServerSideProps si necesitas renderizar una página que depende de datos personalizados del usuario, o información que solo se puede conocer en el momento de la solicitud. Por ejemplo, encabezados de authorization o geolocalización.

Si no necesitas obtener los datos en el momento de la solicitud, o prefieres almacenar en caché los datos y el HTML pre-renderizado, te recomendamos usar getStaticProps.

Comportamiento

• getServerSideProps se ejecuta en el servidor.
• getServerSideProps solo se puede exportar desde una página.
• getServerSideProps devuelve JSON.
• Cuando un usuario visita una página, getServerSideProps se usará para obtener datos en el momento de la solicitud, y los datos se utilizan para renderizar el HTML inicial de la página.
• Los props pasados al componente de la página se pueden ver en el cliente como parte del HTML inicial. Esto es para permitir que la página se hidrate correctamente. Asegúrate de no pasar ninguna información sensible que no deba estar disponible en el cliente a través de props.
• Cuando un usuario visita la página mediante next/link o next/router, Next.js envía una solicitud API al servidor, que ejecuta getServerSideProps.
• No es necesario llamar a una Ruta API de Next.js para obtener datos cuando usas getServerSideProps, ya que la función se ejecuta en el servidor. En su lugar, puedes llamar directamente a un CMS, base de datos u otras APIs de terceros desde dentro de getServerSideProps.

Nota importante:

• Consulta la referencia de la API de getServerSideProps para ver los parámetros y props que se pueden usar con getServerSideProps.
• Puedes usar la herramienta next-code-elimination para verificar qué elimina Next.js del paquete del lado del cliente.

Manejo de errores

Si se produce un error dentro de getServerSideProps, se mostrará el archivo pages/500.js. Consulta la documentación de la página 500 para aprender más sobre cómo crearla. Durante el desarrollo, este archivo no se usará y en su lugar se mostrará la superposición de errores de desarrollo.

Casos especiales

Almacenamiento en caché con Renderizado del Lado del Servidor (SSR)

Puedes usar encabezados de caché (Cache-Control) dentro de getServerSideProps para almacenar en caché respuestas dinámicas. Por ejemplo, usando stale-while-revalidate.

// Este valor se considera fresco durante diez segundos (s-maxage=10).
// Si se repite una solicitud dentro de los próximos 10 segundos, el valor
// previamente almacenado en caché seguirá siendo fresco. Si la solicitud se repite antes de 59 segundos,
// el valor en caché estará obsoleto pero aún se renderizará (stale-while-revalidate=59).
//
// En segundo plano, se realizará una solicitud de revalidación para actualizar la caché
// con un valor fresco. Si actualizas la página, verás el nuevo valor.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

Sin embargo, antes de optar por cache-control, te recomendamos evaluar si getStaticProps con ISR es más adecuado para tu caso de uso.