React Server Component cache函数未缓存结果，如何让缓存生效？

以下是排查和解决的具体步骤：

• 确认调用参数完全一致
  React的cache是基于函数入参的严格匹配实现缓存的，如果不同组件调用getProductBySlug时传入的slug存在差异（比如大小写不同、前后带空格、类型不一致），缓存就无法命中。可以在函数内部添加console.log('当前slug:', slug)，检查所有调用的参数是否完全相同。

• 排查开发模式Strict Mode的影响
  Next.js默认在开发环境开启Strict Mode，这会触发组件两次渲染，导致缓存函数也执行两次。这是开发环境的调试机制，生产模式下会自动消失。如果要验证，可以临时修改next.config.js：

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

  重启开发服务后查看控制台输出是否恢复正常。

• 确保Supabase客户端不干扰缓存
  虽然理论上每次创建Supabase客户端实例不会影响React的函数缓存，但可以尝试缓存客户端实例来排除潜在问题：

  import { cache } from 'react'
  import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
  import { cookies } from 'next/headers'
  
  // 缓存Supabase客户端实例
  const getSupabase = cache(() => createServerComponentClient({ cookies }))
  
  export const getProductBySlug = cache(async ({ slug }) => {
    const supabase = getSupabase()
    const { data, error } = await supabase.from('Product').select().eq('slug', slug).single()
    if (error) throw error
    return data
  })
  

• 确认调用组件为Server Component
  只有Server Component中调用cache包装的函数才会生效，如果组件添加了'use client'指令变成客户端组件，缓存机制会失效，函数会在浏览器端每次调用都执行。检查所有调用该函数的组件顶部是否存在'use client'。

• 检查函数的模块引用一致性
  如果不同组件使用不同路径导入getProductBySlug（比如一个用../utils/api，另一个用@/utils/api），可能导致模块被重复解析，生成多个函数实例，缓存无法共享。统一导入路径即可解决该问题。

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