主页 / coding / 问题 / 76936730
Accepted
TungTung
Asked: 2023-08-20 03:28:30 +0800 CST

如何禁用缓存数据并在每次客户端访问 Next.js 中的页面时更新

  • 772

我正在尝试使用api路由来调用数据库并使用数据来显示表格。当它在本地主机中时，一切正常。但是，我在Vercel上部署后，数据没有更新，它总是在部署时显示数据（即使我将缓存设置为它也使用缓存数据？），这意味着数据没有每次都请求no-store数据库页面加载的时间。

import { EventsSchema, columns } from "./components/columns";
import { DataTable } from "@/app/match/components/data-table";

async function getData(): Promise<EventsSchema[]> {
  const data = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/event`, {cache: "no-store",
}).then((res) => res.json());
  return data;
}

export default async function Match() {
  const data = await getData();
  return (
    <>
      <DataTable data={data} columns={columns} />
    </>
  );
}

/api/事件：

import { connectToDB } from "@/app/utils/database";
import Events from "@/models/events";

export const GET = async () => {
  try {
    await connectToDB();
    const events = await Events.find({}).select(
      "-_id -id -expireAt -homeNmae -awayName -competition"
    )
    return new Response(JSON.stringify(events), { status: 200 });
  } catch (error) {
    return new Response("Failed to fetch all events", { status: 500 });
  }
};

我也尝试过revalidatePath，但是数据仍然没有更新。

import { NextRequest, NextResponse } from "next/server";
import { revalidatePath } from "next/cache";

export async function GET(request: NextRequest) {
  const path = request.nextUrl.searchParams.get("/match") || "/";
  revalidatePath(path);
  return NextResponse.json({ revalidated: true, now: Date.now() });
}

请问为什么以及如何让客户端每次加载页面时都向数据库请求（如果客户端数量较多的话，对数据库和应用程序的要求会不会太高，如果是的话，如何加载）平衡？）？

next.js

1 个回答

  1. Best Answer

    这是因为在app目录和生产环境中，Next.js 默认情况下会将所有获取的数据缓存在 API 路由和服务器组件中。

    对于您的cache: "no-store"，如果您调用外部 API，那就没问题了。但是，您似乎在应用相同逻辑的情况下调用内部 API，您可以使用Route Segment Config进行控制，因为您似乎使用 ORM：

    export const dynamic = 'force-dynamic';

import { connectToDB } from "@/app/utils/database";
import Events from "@/models/events";

export const GET = async () => {
  try {
    await connectToDB();
    const events = await Events.find({}).select(
      "-_id -id -expireAt -homeNmae -awayName -competition"
    )
    return new Response(JSON.stringify(events), { status: 200 });
  } catch (error) {
    return new Response("Failed to fetch all events", { status: 500 });
  }
};
    • 1

相关问题