Next.js Server Action 提交 vs 前端 Fetch 提交：核心区别与优劣分析

在使用 Next.js 开发时，开发者经常会面临一个问题：前端的数据提交应该直接 Fetch 调用 API 还是使用 Next.js 提供的 Server Action 提交？
在这里插入图片描述

本文将深度解析：

✅ Server Action 提交数据的工作原理
✅ 前端 Fetch 提交数据的优缺点
✅ Server Action 的优缺点
✅ 什么时候该用哪种方式
✅ 最优推荐实践

✅ 1. 什么是前端 Fetch 提交？

前端 Fetch 提交，指的是在 React 组件中，使用原生 fetch 或 axios 请求，直接将数据提交到后端 API（如 Strapi）。

示例代码：

'use client';

export default function Home() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const res = await fetch('http://localhost:1337/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name: '张三' })
    });

    const data = await res.json();
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">提交</button>
    </form>
  );
}

✅ 数据流：

[前端 React] -> [Strapi API] -> [数据库 MySQL]

✅ 优点：

📜 开发简单，只需写 fetch 请求。
🚀 直接连接 API，无需配置中间层。

✅ 缺点：

存在 CORS 跨域问题：
- 请求地址是 http://localhost:1337，而前端地址是 http://localhost:3000。
- 必须配置 CORS，或者部署 Nginx 反向代理，增加开发难度。
Token 暴露：
- 如果你的 API 需要 Token，所有 Token 都暴露在前端请求中。
- 任何人只要打开控制台，就可以拿 Token 调用你的 API。
接口地址暴露：
- API 地址暴露在浏览器网络请求中，黑客可以直接调用。
不安全：
- 恶意用户可以伪造请求，不断写入垃圾数据。

✅ 2. 什么是 Server Action 提交？

Server Action 是 Next.js 14+ 提供的一种内置特性，它允许你直接在服务器上处理表单提交，避免数据流直接暴露在前端。

示例代码：

app/actions.js

'use server';

export async function handleSubmit(formData) {
  const name = formData.get('name');

  const res = await fetch('http://localhost:1337/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ data: { name } })
  });

  return res.json();
}

app/page.js

'use client';
import { handleSubmit } from './actions';

export default function Home() {
  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">提交</button>
    </form>
  );
}

✅ 数据流：

[前端 React] -> [Next.js Server Action] -> [Strapi API] -> [数据库 MySQL]

✅ 优点：

✅ 没有 CORS 跨域问题：
- 请求是由服务器发起的，因此不会产生跨域问题。
✅ Token 不会暴露：
- Token 存在 Server Action 中，前端完全看不到。
✅ API 地址完全隐藏：
- 前端看不到 Strapi API 地址，黑客无法直接调用 API。
✅ 更安全：
- 数据提交过程在服务端完成，前端无法篡改数据。
✅ 部署更简单：
- 不需要配置 CORS 或 Nginx 代理。

✅ 缺点：

💡 需要学习和理解 Server Action 的工作原理。
💡 Server Action 只能在 Next.js 项目中使用。

✅ 3. Fetch 提交 vs Server Action 提交（对比表格）

特性	Fetch 提交	Server Action 提交
CORS 跨域	✅ 有跨域	❌ 无跨域
Token 安全性	💀 Token 暴露	🛡 Token 隐藏
API 地址暴露	💀 地址可见	🛡 地址隐藏
数据安全性	💀 易被篡改	🛡 服务器控制
开发复杂度	🚶‍♂️ 较低	🚀 中等
适用场景	展示数据、无敏感操作	提交数据、敏感数据

✅ 4. 什么时候用 Fetch？什么时候用 Server Action？

✅ 使用 Fetch 提交数据的场景：

场景	推荐方式
获取公开数据	✅ Fetch
查询文章/列表数据	✅ Fetch
静态数据展示	✅ Fetch

理由：

公开数据没有安全性问题；
Token 不需要隐藏；
请求失败不会导致严重后果。

✅ 使用 Server Action 提交数据的场景：

场景	推荐方式
提交表单数据	✅ Server Action
用户登录/注册	✅ Server Action
上传文件	✅ Server Action
支付信息提交	✅ Server Action
Token 验证	✅ Server Action

理由：