在Next.js App Router中禁用@vercel/postgres查询缓存的方法

针对你遇到的页面缓存过时数据的问题，在App Router里有两种直接的解决方式：

方法1：页面级禁用缓存（等效于Pages Router的getServerSideProps） #

在你的page.tsx中添加revalidate: 0配置，这会让Next.js在每次请求时都重新生成页面，而非返回缓存版本：

import AddTodo from "./components/add-todo";
import Todo from "./components/todo";
import { sql } from "@vercel/postgres";

// 关键配置：强制每次请求重新生成页面
export const revalidate = 0;

export default async function Home() {
  let data = await sql`SELECT * FROM todos`;
  const { rows: todos } = data;

  return (
    <main>
      <AddTodo />
      <ul>
        {todos.map((todo) => (
          <Todo key={todo.id} id={todo.id} title={todo.text} />
        ))}
      </ul>
    </main>
  );
}

方法2：针对单个SQL查询禁用缓存 #

如果不想整个页面禁用缓存，仅需当前SQL查询拉取最新数据，可以给sql查询添加cache: 'no-store'选项：

import AddTodo from "./components/add-todo";
import Todo from "./components/todo";
import { sql } from "@vercel/postgres";

export default async function Home() {
  // 仅对该查询禁用缓存
  let data = await sql`SELECT * FROM todos`.withOptions({ cache: 'no-store' });
  const { rows: todos } = data;

  return (
    <main>
      <AddTodo />
      <ul>
        {todos.map((todo) => (
          <Todo key={todo.id} id={todo.id} title={todo.text} />
        ))}
      </ul>
    </main>
  );
}

两种方式的区别 #

• revalidate: 0是页面级配置，整个页面的所有服务端逻辑都会在每次请求时重新执行，完全等效于Pages Router中的getServerSideProps。
• withOptions({ cache: 'no-store' })仅作用于当前SQL查询，页面其他缓存逻辑依然生效，适合仅需特定数据实时更新的场景。

内容的提问来源于stack exchange，提问作者Robert Beier