Dificuldade de busca de dados em Next.js: resolvendo dados indefinidos

Next.js oferece vários métodos para busca de dados do lado do servidor, incluindo getStaticProps e getServerSideProps. No entanto, esses métodos destinam-se principalmente a componentes de página na pasta de páginas. No Next.js 13, surgiu um novo conceito conhecido como componentes de servidor, permitindo a busca de dados diretamente no corpo do componente.

Componentes de servidor: uma solução abrangente

Os componentes de servidor fornecem uma abordagem mais flexível à busca de dados, permitindo que os desenvolvedores:

• Busque dados no servidor com a opção de armazenar os resultados em cache, semelhante a getStaticProps.
• Busque dados em cada solicitação, semelhante a getServerSideProps.
• Especifique uma estratégia de revalidação personalizada.

Para utilizar componentes de servidor, defina seu componente como a exportação padrão de um arquivo no diretório do aplicativo. A busca de dados pode ser realizada dentro do corpo do componente usando os seguintes 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 } });
}

Abordagens alternativas

Além dos componentes do servidor, você também pode buscar dados usando bibliotecas ou interagir diretamente com um banco de dados usando um ORM. Nesses cenários, você pode aproveitar Route Segment Config:

// 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();
}

Ao utilizar componentes de servidor ou abordagens alternativas, você pode buscar dados com eficiência no servidor em Next.js, resolvendo o problema de dados indefinidos encontrados ao confiar apenas em getStaticProps.