Next.js + Supabase：更新完成却报Failed to fetch错误

我使用Next.js（15.0.1）和Supabase启动了新项目，首次读取Supabase数据及实时更新均正常，但更新数据库实体时遇到问题。

更新数据的代码 #

const handleToggleActive = () => {
  const updatedStatus = !is_active; // Toggle the status

  supabase
    .from("User")
    .update({ is_active: updatedStatus })
    .eq("id", id)
    .then(({ error }) => {
      if (error) {
        console.error("Error updating user status:", error);
      } else {
        console.log("User status updated successfully");
      }
    })
    .catch((error) => {
      console.error("Unexpected error updating user status:", error);
    });
};

注：User为自定义表，非Supabase自带users表

返回的错误信息 #

{
    "message": "TypeError: Failed to fetch",
    "details": "TypeError: Failed to fetch\n    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@supabase/supabase-js/dist/module/lib/fetch.js:30:25)\n    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@supabase/supabase-js/dist/module/lib/fetch.js:51:16)\n    at Generator.next (<anonymous>)\n    at fulfilled (webpack-internal:///(app-pages-browser)/./node_modules/@supabase/supabase-js/dist/module/lib/fetch.js:11:58)",
    "hint": "",
    "code": ""
}

异常现象 #

• 网络面板中请求出现两次，Service Worker发起的请求返回204，数据已成功更新
• 将请求复制到Postman执行完全正常
• 仅在Next.js中执行更新操作时会抛出上述错误

已尝试的修复操作 #

• 检查网络面板请求详情
• Postman测试请求有效性
• 切换使用Promise链式调用与async/await语法
• 禁用Row Level Security（RLS）
• 测试查询数据功能（正常工作）

问题原因分析及解决建议 #

可能原因 #

1. Service Worker 拦截冲突：Next.js 15默认的Service Worker缓存策略可能与Supabase的请求处理逻辑冲突，导致客户端fetch API抛出错误，尽管数据实际已更新。
2. Next.js App Router 数据机制冲突：若组件为Server Component或使用了特定缓存配置，更新操作可能触发异常的请求生命周期，引发错误。
3. Supabase SDK 版本兼容性：Next.js 15属于较新版本，Supabase JS SDK可能存在未适配的细节，导致在Next.js环境下fetch调用异常。

解决建议 #

• 禁用Next.js Service Worker：在next.config.js中添加配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      serviceWorker: false,
    },
  };
  
  module.exports = nextConfig;
  

• 确保Supabase客户端在客户端组件初始化：在使用Supabase的组件顶部添加'use client'指令，避免在Server Component中发起客户端请求。
• 更新Supabase SDK到最新版本：执行命令npm update @supabase/supabase-js，确保SDK适配Next.js 15环境。
• 调整组件缓存策略：若组件使用了缓存配置，尝试添加cache: 'no-store'或revalidate: 0，避免缓存干扰更新操作。

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