getServerSideProps

Si exportas una función llamada getServerSideProps (Renderizado del lado del servidor) desde una página, Next.js pre-renderizará esta página en cada solicitud usando los datos devueltos por getServerSideProps.

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetServerSideProps<{
  repo: Repo
}>

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

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({ repo }) {
  return repo.stargazers_count
}

Ten en cuenta que, independientemente del tipo de renderizado, cualquier props se pasará al componente de la página y podrá verse en el lado del cliente en el 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.

Cuándo se ejecuta getServerSideProps

getServerSideProps solo se ejecuta en el lado del servidor y nunca en el navegador. Si una página usa getServerSideProps, entonces:

Cuando solicitas esta página directamente, getServerSideProps se ejecuta en el momento de la solicitud, y esta página se pre-renderizará con las props devueltas
Cuando solicitas esta página en transiciones del lado del cliente a través de next/link o next/router, Next.js envía una solicitud API al servidor, que ejecuta getServerSideProps

getServerSideProps devuelve JSON que se usará para renderizar la página. Todo este trabajo será manejado automáticamente por Next.js, por lo que no necesitas hacer nada adicional siempre que tengas definido getServerSideProps.

Puedes usar la herramienta next-code-elimination para verificar qué elimina Next.js del bundle del lado del cliente.

getServerSideProps solo puede exportarse desde una página. No puedes exportarlo desde archivos que no sean páginas.

Ten en cuenta que debes exportar getServerSideProps como una función independiente — no funcionará si agregas getServerSideProps como una propiedad del componente de página.

La referencia de API de getServerSideProps cubre todos los parámetros y props que se pueden usar con getServerSideProps.

Cuándo debería usar getServerSideProps

Deberías usar getServerSideProps solo si necesitas renderizar una página cuyos datos deben obtenerse en el momento de la solicitud. Esto podría deberse a la naturaleza de los datos o propiedades de la solicitud (como encabezados de authorization o ubicación geográfica). Las páginas que usan getServerSideProps se renderizarán en el lado del servidor en el momento de la solicitud y solo se almacenarán en caché si se configuran encabezados cache-control.

Si no necesitas renderizar los datos durante la solicitud, entonces deberías considerar obtener datos en el lado del cliente o con getStaticProps.

getServerSideProps o Rutas API

Puede ser tentador recurrir a una Ruta API cuando quieres obtener datos del servidor, luego llamar a esa ruta API desde getServerSideProps. Este es un enfoque innecesario e ineficiente, ya que causará una solicitud adicional debido a que tanto getServerSideProps como las Rutas API se ejecutan en el servidor.

Considera el siguiente ejemplo. Una ruta API se usa para obtener algunos datos de un CMS. Luego, esa ruta API se llama directamente desde getServerSideProps. Esto produce una llamada adicional, reduciendo el rendimiento. En su lugar, importa directamente la lógica utilizada dentro de tu Ruta API en getServerSideProps. Esto podría significar llamar a un CMS, base de datos u otra API directamente desde dentro de getServerSideProps.

getServerSideProps con Rutas API Edge

getServerSideProps puede usarse tanto con Runtimes Serverless como Edge, y puedes establecer props en ambos. Sin embargo, actualmente en el Runtime Edge, no tienes acceso al objeto de respuesta. Esto significa que no puedes —por ejemplo— agregar cookies en getServerSideProps. Para tener acceso al objeto de respuesta, deberías continuar usando el runtime Node.js, que es el runtime predeterminado.

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

pages/index.js

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

export const getServerSideProps = async () => {}

Obtención de datos en el lado del cliente

Si tu página contiene datos que se actualizan con frecuencia, y no necesitas pre-renderizar los datos, puedes obtener los datos en el lado del cliente. Un ejemplo de esto son los datos específicos del usuario:

Primero, muestra la página inmediatamente sin datos. Partes de la página pueden pre-renderizarse usando Generación Estática. Puedes mostrar estados de carga para los datos faltantes
Luego, obtén los datos en el lado del cliente y muéstralos cuando estén listos

Este enfoque funciona bien para páginas de panel de usuario, por ejemplo. Debido a que un panel es una página privada y específica del usuario, el SEO no es relevante y la página no necesita pre-renderizarse. Los datos se actualizan con frecuencia, lo que requiere la obtención de datos en el momento de la solicitud.

Usando getServerSideProps para obtener datos en el momento de la solicitud

El siguiente ejemplo muestra cómo obtener datos en el momento de la solicitud y pre-renderizar el resultado.

// Esto se llama en cada solicitud
export async function getServerSideProps() {
  // Obtén datos de una API externa
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pasa los datos a la página a través de props
  return { props: { data } }
}

export default function Page({ data }) {
  // Renderiza los datos...
}

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 por 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 hará una solicitud de revalidación para llenar 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: {},
  }
}

Aprende más sobre almacenamiento en caché.

¿getServerSideProps renderiza una página de error?

Si se lanza un error dentro de getServerSideProps, se mostrará el archivo pages/500.js. Consulta la documentación para 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 desarrollo.

On this page