Next.js 14 Server Action无法向客户端组件返回数据求助

我使用Server Action从后端获取数据，预期向客户端组件返回数据但无输出；移除Server Action的"use server"指令后能正常拿到数据，但无法通过getCookies获取Cookie。

Server Action 代码 #

"use server";

import { getCookies } from "next-client-cookies/server";

export async function getData() {
    const cookie = getCookies();
    const token = cookie.get("access_token");
    const response = await fetch(url,{method: "GET", headers: {"Token" : token}});
    const data = await response.json();
    return data;
}

客户端组件代码 #

"use client";

export default function Component() {
    useEffect(() => {
        async function getDataFromServerAction() {
            const data = await getData();
            console.log(data); //无输出
        }
    })
}

问题分析 #

1. 客户端组件未执行异步函数：useEffect内部定义了getDataFromServerAction但未调用，且缺少依赖数组，导致逻辑完全没运行，自然没有console输出。
2. Server Action存在未定义变量：代码中的url未赋值，会直接抛出错误，但未做错误捕获，导致静默失败。
3. 移除"use server"后的逻辑矛盾：移除指令后代码转为客户端执行，getCookies（仅服务器端可用）失效，但此时fetch由客户端发起，若后端允许无Token访问或自动携带了客户端Cookie，会出现能拿到数据但拿不到目标Cookie的情况。

解决方案 #

1. 修复客户端组件的useEffect逻辑

确保调用异步函数、添加依赖数组、增加错误捕获：

"use client";

import { useEffect } from "react";
import { getData } from "./path-to-your-server-action"; // 替换为实际文件路径

export default function Component() {
  useEffect(() => {
    async function getDataFromServerAction() {
      try {
        const data = await getData();
        console.log("获取到的数据:", data);
      } catch (error) {
        console.error("调用Server Action失败:", error);
      }
    }

    // 必须调用定义好的异步函数
    getDataFromServerAction();
  }, []); // 空依赖数组确保组件挂载时仅执行一次

  return <div>加载数据中...</div>;
}

2. 完善Server Action的错误处理与变量定义

补全url、添加错误捕获，避免静默失败：

"use server";

import { getCookies } from "next-client-cookies/server";

// 替换为实际后端API地址
const API_URL = "https://your-backend-api.com/target-endpoint";

export async function getData() {
  try {
    const cookie = getCookies();
    const token = cookie.get("access_token");
    
    if (!token) {
      throw new Error("未找到access_token Cookie");
    }

    const response = await fetch(API_URL, {
      method: "GET",
      headers: { "Token": token },
    });

    if (!response.ok) {
      throw new Error(`请求失败: ${response.status} ${response.statusText}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Server Action 获取数据失败:", error);
    throw error; // 抛出错误让客户端捕获处理
  }
}

额外注意事项 #

• 确保Next.js版本支持Server Action（13.4+），并在next.config.js中启用experimental: { serverActions: true }
• Server Action需放在单独文件中，或在组件文件中用"use server"标记独立函数（不能在客户端组件内部定义）
• 若后端是外部API，需配置跨域允许Next.js应用的请求
• 若access_token是HttpOnly Cookie，客户端无法直接读取，但Server Action在服务器端可正常获取，这是符合安全规范的逻辑

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