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ándola desde un Componente de Página. El siguiente ejemplo muestra cómo puedes obtener datos de una API externa 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>
  )
}

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

export default function Page({ repo }) {
  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, cabeceras 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, recomendamos usar getStaticProps.

Comportamiento

• getServerSideProps se ejecuta en el servidor.
• getServerSideProps solo puede exportarse 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 página pueden verse en el cliente como parte del HTML inicial. Esto permite que la página se hidrate correctamente. Asegúrate de no pasar información sensible que no debería estar disponible en el cliente mediante props.
• Cuando un usuario visita la página a través de 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 al usar 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 externas desde dentro de getServerSideProps.

Nota importante:

• Consulta la referencia de 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á el overlay de errores de desarrollo.

Casos especiales

Edge Runtime

getServerSideProps puede usarse tanto con Serverless como con Edge Runtimes, y puedes establecer props en ambos.

Sin embargo, actualmente en Edge Runtime no tienes acceso al objeto de respuesta. Esto significa que no puedes —por ejemplo— añadir cookies en getServerSideProps. Para tener acceso al objeto de respuesta, deberías seguir usando el runtime de Node.js, que es el runtime predeterminado.

Puedes establecer explícitamente el runtime por página modificando el config, por ejemplo:

export const config = {
  runtime: 'nodejs', // o "edge"
}

export const getServerSideProps = async () => {}

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

Puedes usar cabeceras de caché (Cache-Control) dentro de getServerSideProps para almacenar respuestas dinámicas en caché. 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é será 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 recurrir a cache-control, recomendamos evaluar si getStaticProps con ISR es más adecuado para tu caso de uso.