NextJS中useEffect调用服务端动作仅额外调用时生效问题排查

问题背景 #

我在NextJS客户端组件的useEffect中调用服务端动作fetchAllJobs，但这个动作会随机失效。目前发现唯一解决办法是同时调用另一个服务端动作fetchAllProblems。另外我用了NextUI的Table组件展示数据，但认为这和当前问题无关。

客户端组件代码 #

const [retrievedJobs, setRetrievedJobs] = useState<Job[] | undefined>([]);
const [retrievedProblems, setRetrievedProblems] = useState<Problem[] | undefined>([]);

useEffect(() => {
  const getJobs = async () => {
    const jobs = await fetchAllJobs();
    console.log("getJobs:jobs: ", jobs)
    setRetrievedJobs(jobs)
  }

  const getProblems = async () => {
    const problems = await fetchAllProblems();
    setRetrievedProblems(problems)
  }

  getJobs();
  getProblems();
}, [])

服务端动作代码（fetchAllJobs） #

export async function fetchAllJobs(): Promise<Job[]> {
  let jobs: Job[] = []
  
  try {
    neo4jDriver = await newNeo4jDriver();
    const session = neo4jDriver.session({ database: 'neo4j' });
    
    const result = await session.executeRead(async (tx: any) => {
      return await tx.run(`
        MATCH (j:Job) RETURN j
        ORDER BY j.title
      `)
    })

    result.records.map((record: any) => {
      jobs.push({
        id: record.get(0).properties.id,
        title: record.get(0).properties.title
      })
    })
  } catch (err: any) {
    console.log("Error: ", err);
    throw new Error(err);
  }

  return jobs // 我试过加finally块，同样没用
}

当前现象 #

同时调用两个动作时，console.log("getJobs:jobs: ", jobs)能正常打印出jobs数据；但移除getProblems()调用后，getJobs()就不再正常工作，请问这是什么原因？

可能的原因及排查方向 #

1. Neo4j驱动实例复用/资源释放问题 #

从代码看neo4jDriver像是全局变量，如果newNeo4jDriver()多次调用时没正确处理实例复用或资源释放，可能导致单独调用时驱动初始化异常，但同时调用两个动作时，驱动被其中一个动作正确初始化并复用。

检查点：

• 确认neo4jDriver的作用域，若为全局变量，多次调用await newNeo4jDriver()会创建多实例，引发资源冲突。
• 单独调用fetchAllJobs时，查看服务端日志是否有驱动初始化相关错误（当前catch块仅打印错误，可能存在超时或初始化失败被吞的情况）。
• 尝试在fetchAllJobs中手动关闭session和驱动：

  try {
    neo4jDriver = await newNeo4jDriver();
    const session = neo4jDriver.session({ database: 'neo4j' });
    // ... 查询逻辑
    await session.close();
  } catch (err) {
    // ... 错误处理
  } finally {
    if (neo4jDriver) {
      await neo4jDriver.close();
    }
  }
  

2. NextJS服务端动作的缓存/并发机制问题 #

NextJS服务端动作有自身的缓存和并发处理逻辑，单独调用一个动作时可能触发缓存失效或请求中断，而同时调用两个动作时，并发处理规避了这个问题。

检查点：

• 给fetchAllJobs添加revalidate: 0强制禁用缓存：

  export async function fetchAllJobs(): Promise<Job[]> {
    'use server'
    revalidate: 0;
    // ... 原有逻辑
  }
  

• 查看NextJS服务端日志，单独调用fetchAllJobs时是否有请求被取消或报错的记录。

3. 全局变量污染问题 #

如果neo4jDriver是全局变量，同时调用两个动作时，fetchAllProblems可能先完成驱动初始化，让fetchAllJobs能复用正确实例；单独调用时，驱动初始化可能因异步问题失败。建议用单例模式确保驱动只初始化一次：

let neo4jDriverInstance: any = null;

async function getNeo4jDriver() {
  if (!neo4jDriverInstance) {
    neo4jDriverInstance = await newNeo4jDriver();
  }
  return neo4jDriverInstance;
}

// 在fetchAllJobs中使用
const neo4jDriver = await getNeo4jDriver();

4. 客户端状态更新验证 #

虽然控制台能打印jobs，但单独调用时可能因组件渲染时机问题，setRetrievedJobs未正确触发更新。可以监听retrievedJobs变化验证：

useEffect(() => {
  console.log("retrievedJobs updated: ", retrievedJobs);
}, [retrievedJobs]);

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