Detalles de getStaticProps

Aquí hay información esencial que deberías conocer sobre getStaticProps.

Consultar API externa o base de datos

En lib/posts.js, hemos implementado getSortedPostsData que obtiene datos del sistema de archivos. Pero puedes obtener los datos de otras fuentes, como un endpoint de API externa, y funcionará perfectamente:

export async function getSortedPostsData() {
  // En lugar del sistema de archivos,
  // obtén datos de posts desde un endpoint de API externa
  const res = await fetch('..');
  return res.json();
}

Nota: Next.js incluye un polyfill para fetch() tanto en el cliente como en el servidor. No necesitas importarlo.

También puedes consultar directamente la base de datos:

import someDatabaseSDK from 'someDatabaseSDK'
 
const databaseClient = someDatabaseSDK.createClient(...)
 
export async function getSortedPostsData() {
  // En lugar del sistema de archivos,
  // obtén datos de posts desde una base de datos
  return databaseClient.query('SELECT posts...')
}

Esto es posible porque getStaticProps solo se ejecuta en el lado del servidor. Nunca se ejecutará en el lado del cliente. Ni siquiera se incluirá en el paquete JS para el navegador. Esto significa que puedes escribir código como consultas directas a bases de datos sin que se envíen a los navegadores.

Desarrollo vs. Producción

• En desarrollo (npm run dev o yarn dev), getStaticProps se ejecuta en cada solicitud.
• En producción, getStaticProps se ejecuta en tiempo de compilación. Sin embargo, este comportamiento puede mejorarse usando la clave fallback devuelta por getStaticPaths.

Como está diseñado para ejecutarse en tiempo de compilación, no podrás usar datos que solo estén disponibles durante el tiempo de solicitud, como parámetros de consulta o encabezados HTTP.

Solo permitido en una página

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

Una de las razones de esta restricción es que React necesita tener todos los datos requeridos antes de que la página se renderice.

¿Qué pasa si necesito obtener datos en tiempo de solicitud?

Dado que la Generación Estática ocurre una vez en tiempo de compilación, no es adecuada para datos que se actualizan con frecuencia o cambian en cada solicitud del usuario.

En casos como este, donde tus datos pueden cambiar, puedes usar Renderizado del lado del servidor (Server-side Rendering). Aprenderemos más sobre el renderizado del lado del servidor en la siguiente sección.