Next.js14：客户端页面加载时自动调用Server Action的问题与示例

可行示例代码 #

1. 定义Server Action（服务器端文件，如app/actions.ts） #

'use server';

import { sqlite3 } from 'sqlite3';
import { open } from 'sqlite';

// 初始化SQLite连接
async function getDbConnection() {
  return open({
    filename: './person.db',
    driver: sqlite3.Database,
  });
}

// 根据ID查询人员详情的Server Action
export async function fetchPersonById(id: string) {
  try {
    const db = await getDbConnection();
    const person = await db.get(
      'SELECT name, location, phone FROM people WHERE id = ?',
      [id]
    );
    await db.close();
    return person;
  } catch (err) {
    console.error('查询人员数据失败:', err);
    throw new Error('无法获取人员详情');
  }
}

2. 客户端组件（带use client的页面，如app/[id]/page.tsx） #

'use client';

import { useEffect, useState } from 'react';
import { fetchPersonById } from '../actions';

type Person = {
  name: string;
  location: string;
  phone: string;
};

export default function PersonDetailPage({ params }: { params: { id: string } }) {
  const [person, setPerson] = useState<Person | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  useEffect(() => {
    // 页面加载时自动触发Server Action
    const loadPersonData = async () => {
      try {
        const data = await fetchPersonById(params.id);
        setPerson(data);
      } catch (err) {
        setErrorMsg((err as Error).message);
      } finally {
        setIsLoading(false);
      }
    };

    loadPersonData();
  }, [params.id]); // 依赖ID变化，确保参数更新时重新查询

  if (isLoading) return <div>加载中...</div>;
  if (errorMsg) return <div>错误: {errorMsg}</div>;
  if (!person) return <div>未找到对应人员</div>;

  return (
    <div className="person-detail">
      <h2>人员信息</h2>
      <p><strong>姓名:</strong> {person.name}</p>
      <p><strong>位置:</strong> {person.location}</p>
      <p><strong>电话:</strong> {person.phone}</p>
    </div>
  );
}

常见代码问题排查 #

如果你的代码无法正常运行，大概率是以下问题之一：

• 未在副作用钩子中调用Server Action：直接在组件顶层调用异步Server Action会触发React渲染警告，必须放在useEffect或类似副作用钩子内执行。
• Server Action缺少'use server'指令：没有标记该指令的函数无法被客户端调用，会抛出跨环境执行错误。
• 数据库连接未正确释放：每次查询后未关闭SQLite连接，会导致连接泄漏，长期运行会耗尽资源。
• 未处理加载/错误状态：没有加载提示或错误反馈，用户无法感知数据获取状态，且调试困难。
• useEffect依赖项缺失：如果依赖数组中没有包含id，当路由参数id变化时，不会重新执行查询，导致数据不更新。

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