Препятствия при извлечении данных в Next.js: разрешение неопределенных данных

Next.js предлагает несколько методов извлечения данных на стороне сервера, включая getStaticProps и getServerSideProps. Однако эти методы в первую очередь предназначены для компонентов страницы в папке страниц. В Next.js 13 появилась новая концепция, известная как «Серверные компоненты», позволяющая извлекать данные непосредственно из тела компонента.

Серверные компоненты: комплексное решение

Серверные компоненты обеспечивают более гибкий подход для извлечения данных, что позволяет разработчикам:

• Извлекать данные на сервер с возможностью кэширования результатов, аналогично getStaticProps.
• Извлекайте данные по каждому запросу, аналогично getServerSideProps.
• Укажите собственную стратегию повторной проверки.

Чтобы использовать серверные компоненты, определите свой компонент как компонент по умолчанию экспорт файла в каталог приложения. Извлечение данных можно выполнить внутри тела компонента, используя следующие методы:

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

Альтернативные подходы

Помимо серверных компонентов вы также можете получать данные с помощью библиотек или напрямую взаимодействовать с базой данных с помощью ORM. В таких сценариях вы можете использовать конфигурацию сегмента маршрута:

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

Используя серверные компоненты или альтернативные подходы, вы можете эффективно получать данные на сервере в Next.js, решая проблему неопределенных данных, возникающую при использовании исключительно getStaticProps.