如何使用服务器组件及其他组件在 Next.js 中获取服务器端数据？

Next.js 使用 getStaticProps 及其他方式获取服务器端数据

问题：
下一篇使用 Django Rest Framework 的 .js 应用程序，从 REST API 获取数据会导致未定义的值和运行时映射数据时出错。

说明：
Next.js 方法（如 getStaticProps）专门为服务器端数据检索而设计，并且仅在页面目录中有效运行。但是，在最新版本的 Next.js 中，可以直接在应用程序目录内的服务器组件中获取数据。

解决方案：
要解决此问题并执行 server-在最新的 Next.js 中获取侧面数据，请考虑以下选项：

使用服务器组件：

• 在组件主体内实现服务器端数据获取，如代码片段所示。
• 这种方法可以直接访问标头和 cookie 来进行数据检索.

使用路由段配置（用于数据库交互）：

• 配置路由段以缓存具有所需寿命（例如 10 秒）的数据或完全禁用缓存。
• 此方法允许在数据获取和缓存策略，包括使用以下方式与数据库直接交互ORM。

代码片段（服务器组件）：

// page.js
export default async function Page() {
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  return "...";
}

代码片段（路由段配置）：

// layout.js OR page.js OR route.js
export const revalidate = 10;

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

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

通过实施这些解决方案，您可以即使在使用服务器组件时，也能有效地从服务器获取数据并处理 Next.js 中的缓存策略。

以上是如何使用服务器组件及其他组件在 Next.js 中获取服务器端数据？的详细内容。更多信息请关注PHP中文网其他相关文章！