Next.js 15 + Supabase 缓存机制疑问及缓存策略配置咨询

核心问题解答 #

Supabase JS客户端的查询不会自动继承Next.js 14的force-cache默认行为，因为Supabase内部的HTTP请求逻辑独立于Next.js的fetch封装。你之前设置的export const revalidate = 60;未生效，是因为Supabase请求默认采用「无缓存」策略，每次服务器组件渲染都会发起新请求到数据库，导致新数据立即显示，绕过了页面的revalidate规则。

解决方案 #

1. 自定义Supabase客户端的缓存策略 #

通过覆盖Supabase客户端的全局fetch方法，给所有请求统一设置缓存规则：

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.SUPABASE_SERVICE_ROLE_KEY,
  {
    global: {
      fetch: (url, options = {}) => {
        // 启用类似Next.js 14的force-cache策略
        const cacheOptions = {
          ...options,
          cache: 'force-cache',
          // 也可通过Header自定义缓存时长
          // headers: { ...options.headers, 'Cache-Control': 's-maxage=60, stale-while-revalidate=30' }
        };
        return fetch(url, cacheOptions);
      }
    }
  }
);

配置后所有Supabase查询都会遵循设定的缓存规则，配合页面的revalidate参数即可实现定时刷新。

2. 给单个查询添加缓存头 #

如果仅需给特定查询设置缓存，可在查询时通过.headers()方法添加Cache-Control头：

const { data, error } = await supabase
  .from("table_name")
  .select("*")
  .headers({
    'Cache-Control': 's-maxage=60, stale-while-revalidate=30'
  });

• s-maxage=60：指定CDN/边缘缓存保留数据60秒
• stale-while-revalidate=30：允许缓存过期后先返回旧数据，后台异步刷新新数据，平衡性能与实时性

3. 使用Next.js的cache函数缓存查询结果 #

通过React的cache函数（Next.js 13+支持）直接缓存Supabase查询的结果，避免重复发起数据库请求：

import { cache } from 'react';
import { createClient } from '@supabase/supabase-js';

// 缓存Supabase查询逻辑
const getTableData = cache(async () => {
  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.SUPABASE_SERVICE_ROLE_KEY
  );
  const { data, error } = await supabase.from("table_name").select("*");
  if (error) throw error;
  return data;
});

export default async function Page() {
  const data = await getTableData();
  return <div>{JSON.stringify(data)}</div>;
}

// 设置缓存自动刷新时间为60秒
export const revalidate = 60;

注意事项 #

• 本地开发模式下Next.js默认禁用缓存，测试缓存效果需部署到生产环境（如Vercel）或启用生产构建。
• SUPABASE_SERVICE_ROLE_KEY是敏感密钥，必须存放在服务器端环境变量中，禁止暴露给客户端代码。
• 若需实时数据（如聊天、通知类场景），请勿启用缓存，保持默认的「no-cache」策略即可。

内容的提问来源于stack exchange，提问作者Developer D