Obtención de datos en tiempo de solicitud

Si necesitas obtener datos en tiempo de solicitud en lugar de en tiempo de compilación, puedes probar con el Renderizado del lado del servidor (SSR):

Para usar el Renderizado del lado del servidor (SSR), debes exportar getServerSideProps en lugar de getStaticProps desde tu página.

Uso de getServerSideProps

Aquí está el código inicial para getServerSideProps. No es necesario para nuestro ejemplo de blog, así que no lo implementaremos.

export async function getServerSideProps(context) {
  return {
    props: {
      // props para tu componente
    },
  };
}

Dado que getServerSideProps se llama en tiempo de solicitud, su parámetro (context) contiene parámetros específicos de la solicitud.

Debes usar getServerSideProps solo si necesitas pre-renderizar una página cuyos datos deben obtenerse en tiempo de solicitud. El tiempo hasta el primer byte (TTFB) será más lento que con getStaticProps porque el servidor debe calcular el resultado en cada solicitud, y el resultado no puede almacenarse en caché por una CDN sin configuración adicional.

Renderizado del lado del cliente (CSR)

Si no necesitas pre-renderizar los datos, también puedes usar la siguiente estrategia (llamada Renderizado del lado del cliente (CSR)):

• Generar estáticamente (pre-renderizar) las partes de la página que no requieren datos externos.
• Cuando la página se cargue, obtener los datos externos desde el cliente usando JavaScript y rellenar las partes restantes.

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 ser pre-renderizada. Los datos se actualizan con frecuencia, lo que requiere la obtención de datos en tiempo de solicitud.

SWR

El equipo detrás de Next.js ha creado un hook de React para la obtención de datos llamado SWR. Lo recomendamos encarecidamente si estás obteniendo datos del lado del cliente. Maneja caché, revalidación, seguimiento de enfoque, reobtención en intervalos y más. No cubriremos los detalles aquí, pero aquí hay un ejemplo de uso:

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

Consulta la documentación de SWR para obtener más información.

¡Eso es todo!

En la próxima lección, crearemos páginas para cada publicación del blog usando rutas dinámicas.

Nuevamente, puedes obtener información detallada sobre getStaticProps y getServerSideProps en la documentación de Obtención de datos.