seo工资待遇怎么样关键词优化步骤简短

在使用 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，无需配置中间层。

✅ 缺点：

1. 存在 CORS 跨域问题：

   • 请求地址是 http://localhost:1337，而前端地址是 http://localhost:3000。
   • 必须配置 CORS，或者部署 Nginx 反向代理，增加开发难度。

2. Token 暴露：

   • 如果你的 API 需要 Token，所有 Token 都暴露在前端请求中。
   • 任何人只要打开控制台，就可以拿 Token 调用你的 API。

3. 接口地址暴露：

   • API 地址暴露在浏览器网络请求中，黑客可以直接调用。

4. 不安全：

   • 恶意用户可以伪造请求，不断写入垃圾数据。

---

✅ 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]

✅ 优点：

1. ✅ 没有 CORS 跨域问题：

   • 请求是由服务器发起的，因此不会产生跨域问题。

2. ✅ Token 不会暴露：

   • Token 存在 Server Action 中，前端完全看不到。

3. ✅ API 地址完全隐藏：

   • 前端看不到 Strapi API 地址，黑客无法直接调用 API。

4. ✅ 更安全：

   • 数据提交过程在服务端完成，前端无法篡改数据。

5. ✅ 部署更简单：

   • 不需要配置 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

理由：

• Server Action 可以隐藏 Token；
• API 地址完全隐藏；
• 安全性最高。

---

✅ 5. 总结

如果你的项目是 公开展示数据，推荐直接使用 fetch。如果是 提交敏感数据，推荐使用 Server Action。

✅ 推荐最佳实践：

操作类型	推荐方式
读取公开数据	Fetch 请求
提交表单数据	Server Action
上传文件	Server Action
登录/注册	Server Action

---

通过掌握 Server Action，你的 Next.js 项目将更加安全、可控、简洁。