Obstáculo para la obtención de datos en Next.js: resolución de datos no definidos

Next.js ofrece varios métodos para la obtención de datos del lado del servidor, incluidos getStaticProps y getServerSideProps. Sin embargo, estos métodos están destinados principalmente a los componentes de la página dentro de la carpeta de páginas. En Next.js 13, surgió un nuevo concepto conocido como Componentes del servidor, que permite obtener datos directamente dentro del cuerpo del componente.

Componentes del servidor: una solución integral

Los componentes del servidor proporcionan un enfoque más flexible a la obtención de datos, lo que permite a los desarrolladores:

• Obtener datos en el servidor con la opción de almacenar en caché los resultados, similar a getStaticProps.
• Obtener datos en cada solicitud, similar a getServerSideProps.
• Especifique una estrategia de revalidación personalizada.

Para utilizar componentes del servidor, defina su componente como la exportación predeterminada de un archivo en el directorio de la aplicación. La recuperación de datos se puede realizar dentro del cuerpo del componente utilizando los siguientes métodos:

import { headers, cookies } from "next/headers";

export default async function Component({ params, searchParams }) {
  // Cached until manually invalidated
  const staticData = await fetch(`https://...`, { cache: "force-cache" });

  // Refetched on every request
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  // Revalidated with a 10-second lifetime
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });
}

Enfoques alternativos

Además de los componentes del servidor, también puede recuperar datos mediante bibliotecas o interactuar directamente con una base de datos mediante un ORM. En tales escenarios, puede aprovechar la configuración del segmento de ruta:

// layout.js OR page.js OR route.js

import prisma from "./lib/prisma";

// Caching options
export const revalidate = 10; // Revalidate every 10s
// OR
export const dynamic = "force-dynamic"; // No caching

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
}

Al utilizar componentes de servidor o enfoques alternativos, puede recuperar datos de manera eficiente en el servidor en Next.js, solucionando el problema de los datos no definidos que se encuentran cuando se depende únicamente de getStaticProps.