getServerSideProps

Cuando exportas una función llamada getServerSideProps (Renderizado del lado del servidor o SSR) desde una página, Next.js pre-renderizará esta página en cada solicitud usando los datos devueltos por getServerSideProps. Esto es útil si necesitas obtener datos que cambian frecuentemente y deseas que la página se actualice para mostrar la información más reciente.

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>
  )
}

Puedes importar módulos en el ámbito superior para usarlos en getServerSideProps. Los imports utilizados no se incluirán en el bundle del lado del cliente. Esto significa que puedes escribir código del lado del servidor directamente en getServerSideProps, incluyendo la obtención de datos desde tu base de datos.

Parámetro context

El parámetro context es un objeto que contiene las siguientes claves:

Valores de retorno de getServerSideProps

La función getServerSideProps debe devolver un objeto con cualquiera de las siguientes propiedades:

props

El objeto props es un par clave-valor, donde cada valor es recibido por el componente de la página. Debe ser un objeto serializable para que cualquier prop pasado pueda ser serializado con JSON.stringify.

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js es increíble` }, // se pasará al componente de página como props
  }
}

notFound

El booleano notFound permite que la página devuelva un estado 404 y una Página 404. Con notFound: true, la página devolverá un 404 incluso si hubo una página generada exitosamente antes. Esto está diseñado para soportar casos de uso como contenido generado por usuarios que es eliminado por su autor.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // se pasará al componente de página como props
  }
}

redirect

El objeto redirect permite redirigir a recursos internos y externos. Debe coincidir con la forma { destination: string, permanent: boolean }. En algunos casos raros, podrías necesitar asignar un código de estado personalizado para que clientes HTTP antiguos redirijan correctamente. En estos casos, puedes usar la propiedad statusCode en lugar de la propiedad permanent, pero no ambas.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // se pasará al componente de página como props
  }
}

Historial de versiones