React Server Actions（服务端动作） - 在服务端执行的前端交互逻辑

引言

在传统的Web开发中，前端与后端的交互通常依赖于HTTP请求，前端通过API调用与后端进行数据交换。然而，随着Web应用复杂度的增加，这种模式暴露出了一些问题，例如需要编写大量冗余的请求和响应处理代码、前后端逻辑分离导致的开发效率低下等。React Server Actions（服务端动作）作为一种新兴技术，为解决这些问题提供了新的思路。它允许开发者在服务端直接执行前端交互逻辑，从而简化了开发流程，提高了应用性能。

React Server Actions的基本概念

React Server Actions是React框架提供的一种机制，旨在简化客户端与服务器之间的数据交互。它通过封装HTTP请求的细节，使开发者能够以更直观的方式调用服务器端函数，而无需手动管理请求和响应。具体来说，Server Actions将服务器端逻辑封装成函数，供前端调用。框架在背后自动处理HTTP请求和响应的细节，开发者只需关注业务逻辑，而无需手动管理请求的构建和响应的解析。

在React中，Server Actions通过use server指令来定义。开发者可以将该指令放在异步函数的顶部，将该函数定义为Server Action，或者将该指令放在单独文件的顶部，将该文件的所有导出定义为Server Action。需要注意的是，Server Action的参数和返回值必须能被React序列化。

React Server Actions的工作原理

Server Actions的调用过程可以分为以下几个步骤：

1. 服务器端函数定义与暴露：服务器端函数被定义并暴露出来，供前端调用。这些函数通常被配置在特定的文件中（例如API路由），框架会自动处理这些函数的暴露和调用。例如，在Next.js中，开发者可以在app/actions.js文件中定义服务器端函数：

javascript
// app/actions.js
export async function saveData(data) {
  // 假设这里进行数据验证和处理
  const saved = await someDatabase.save(data);
  return saved;
}

2. 前端调用：前端通过特定的框架机制（如自动生成的API调用函数或直接通过表单提交）来触发服务器端函数。这通常隐藏了HTTP请求的细节，前端开发者只需调用相关函数或提交表单即可。例如，在Next.js的客户端组件中，可以这样调用saveData函数：

javascript
// app/page.js
import { saveData } from './actions';
 
export default function Page() {
  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);
    const result = await saveData(data);
    console.log('Server response:', result);
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="Enter your name" required />
      <button type="submit">Save</button>
    </form>
  );
}

在这个例子中，saveData函数会在服务端执行，但从客户端的视角来看，它就像一个普通的函数调用。

React Server Actions在不同框架中的实现

Next.js

Next.js 13+版本中，Server Actions是内置特性。开发者可以直接定义服务器端函数，并从前端调用。例如，在一个简单的表单提交场景中，可以在服务器端定义一个处理表单数据的函数，然后在客户端组件中通过表单提交来调用该函数。

javascript
// components/SignupPage.js
export default function SignupPage() {
  const createAccount = async (formData) => {
    'use server';
    const name = formData.get('name');
    const email = formData.get('email');
    const password = formData.get('password');
    // 保存到数据库或执行其他服务器端操作
  };
 
  return (
    <form action={createAccount} method="POST">
      <input type="text" name="name" />
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button type="submit">Create Account</button>
    </form>
  );
}

Remix

在Remix中，Server Actions通过action函数处理表单提交。服务器端文件（例如routes/submit.jsx）可以定义一个action函数来处理表单数据：

javascript
// routes/submit.jsx
import { json } from '@remix-run/node';
 
export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get('username');
  // 数据处理逻辑
  return json({ message: `User ${username} saved!` });
}

客户端文件（例如routes/index.jsx）可以通过表单提交来调用该action函数：

javascript
// routes/index.jsx
import { Form } from '@remix-run/react';
 
export default function Index() {
  return (
    <Form method="post" action="/submit">
      <input type="text" name="username" placeholder="Enter your name" required />
      <button type="submit">Save</button>
    </Form>
  );
}

Nuxt.js

Nuxt.js通过serverMiddleware实现类似的功能。服务器端文件（例如serverMiddleware/save.js）可以定义一个中间件函数来处理请求：

javascript
// serverMiddleware/save.js
export default function (req, res, next) {
  if (req.method === 'POST') {
    // 处理数据逻辑
    res.end(JSON.stringify({ message: 'Data saved' }));
  } else {
    next();
  }
}

React Server Actions的优势

简化开发体验

Server Actions封装了HTTP请求的细节，开发者只需关注业务逻辑，而无需手动管理请求的构建和响应的解析。例如，在传统的表单提交场景中，开发者需要手动编写表单数据的序列化、请求的发送和响应的处理等代码。而使用Server Actions后，这些代码都可以被简化，开发者只需定义一个服务器端函数，并在客户端组件中调用该函数即可。

提高应用性能

由于Server Actions在服务端执行，可以减少客户端的渲染负担，提升应用的性能。例如，对于一些需要复杂计算或数据库查询的操作，如果放在客户端执行，会导致客户端的渲染时间增加，用户体验下降。而将这些操作放在服务端执行，客户端只需接收处理结果并渲染即可，从而提高了应用的响应速度。

增强安全性

Server Actions可以在服务端处理敏感信息，避免敏感信息在客户端暴露。例如，对于一些涉及用户个人数据的获取或处理操作，如果放在客户端执行，可能会导致用户数据泄露的风险。而将这些操作放在服务端执行，可以确保数据只在服务器端处理，不被暴露在客户端。

案例分析：使用React Server Actions实现点赞功能

假设我们正在开发一个博客网站，用户可以对文章进行点赞。我们可以使用React Server Actions来实现这个功能。

1. 定义服务器端函数：在服务端定义一个incrementLike函数，用于处理点赞操作。该函数接收文章的ID作为参数，并在数据库中增加该文章的点赞数。

javascript
// actions.js
'use server';
 
export async function incrementLike(articleId) {
  // 假设这里进行数据库操作，增加文章的点赞数
  const updatedArticle = await someDatabase.incrementLike(articleId);
  return updatedArticle.likeCount;
}

2. 创建客户端组件：在客户端创建一个LikeButton组件，用于显示点赞按钮和点赞数。该组件使用useTransition和useState钩子来管理点赞操作的待处理状态和点赞数。

javascript
// LikeButton.js
'use client';
import { incrementLike } from './actions';
import { useState, useTransition } from 'react';
 
function LikeButton({ articleId, initialLikeCount }) {
  const [isPending, startTransition] = useTransition();
  const [likeCount, setLikeCount] = useState(initialLikeCount);
 
  const onClick = () => {
    startTransition(async () => {
      const currentCount = await incrementLike(articleId);
      setLikeCount(currentCount);
    });
  };
 
  return (
    <>
      <p>Total Likes: {likeCount}</p>
      <button onClick={onClick} disabled={isPending}>
        {isPending ? 'Liking...' : 'Like'}
      </button>
    </>
  );
}
 
export default LikeButton;

3. 在页面中使用组件：在页面组件中使用LikeButton组件，并传递文章的ID和初始点赞数。

javascript
// Page.js
import LikeButton from './LikeButton';
 
export default function ArticlePage() {
  const articleId = '123'; // 假设这是文章的ID
  const initialLikeCount = 10; // 假设这是文章的初始点赞数
 
  return (
    <div>
      <h1>Article Title</h1>
      <LikeButton articleId={articleId} initialLikeCount={initialLikeCount} />
    </div>
  );
}

在这个案例中，当用户点击点赞按钮时，LikeButton组件会调用incrementLike函数，该函数在服务端执行，增加文章的点赞数，并返回更新后的点赞数。客户端组件接收到更新后的点赞数后，会更新组件的状态，从而显示最新的点赞数。

结论

React Server Actions作为一种新兴技术，为前端与后端的交互提供了一种新的思路。它通过在服务端执行前端交互逻辑，简化了开发流程，提高了应用性能，增强了安全性。在不同框架中，Server Actions的实现方式有所不同，但基本原理是相似的。通过使用Server Actions，开发者可以更加专注于业务逻辑的实现，而无需花费大量时间处理繁琐的请求和响应细节。在实际开发中，开发者可以根据具体需求选择合适的框架和技术来实现Server Actions，从而构建出高性能、易维护的Web应用。

扫描下方二维码，一个老毕登免费为你解答更多软件开发疑问！