React Server Actions 允许您直接在服务器上运行异步代码。它们消除了创建API端点来改变数据的需要。相反，您可以编写在服务器上执行并可从客户端或服务器组件调用的异步函数。安全性是 Web 应用程序的首要任务，因为它们可能容易受到各种威胁。这就是服务器操作的作用所在。它们提供有效的安全解决方案，可防止不同类型的...
React Server Actions was born out of the need to address these gaps in the implementation of React's new server actions feature. Rather than replacing the native functionality, this library builds upon it by providing a structured approach to server actions. The core idea is to establish a wel...
React Server Component,是React正在探索的特性,带来一种混合渲染模式,部分组件在服务端渲染,部分组件在客户端渲染。这一特性有望综合两者的优势,打开一种前端渲染的新模式。 而Server Actions的出现可以完全打破前后端壁垒,实现两者间自由的逻辑调用。 React Server Component React Server Component(下文简称RSC),是一种...
Next.js Server Actions:允许直接在组件中定义服务器端函数,简化了客户端和服务器之间的通信。 FormData:Web API提供的接口,用于构造表单数据集合。 react-hook-form:用于构建灵活和高效的表单的React库。 zod:TypeScript优先的模式声明和验证库。 为什么选择这种方法? 1. 简化的状态管理 使用FormData和Server Actions...
“use server” 指令标记了可以从客户端代码调用的服务器端函数。我们将在另一篇文章中讨论“use server”和“server actions”。 React 服务器组件的渲染生命周期 让我们假设使用 Next.js 作为 React 框架,来探索 RSC 的渲染生命周期。 Vercel 搭配 Next.js 13 是首批支持 React 服务器端组件(RSC)架构的。
没有setIsLoading。没有 fetch('/api/contact', { method: 'POST' })。只需调用一个函数,即可免费获得其他所有内容。这只是一个简单的示例;要了解更多信息,请务必查看这个 Next.js 文档(https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)。
在 之外使用 Server Action 时,调用 Server Action 时请使用 transition,这允许显示加载指示器、显示 乐观状态更新 和处理意外错误。表单会自动在 transition 中包装 Server Action。 import incrementLike from './actions'; import { useState, useTransition } from 'react'; function LikeButton() { const [is...
React Server Components 我们可以将React组件迁移到服务器上.也就是说我们可以将它们与后台数据一起放置. 让我们现在来了解一下RSC。这些新的组件可以更快地获取数据,因为它们位于服务器上。它们可以访问我们的服务器基础设施,如文件系统和数据存储,而无需通过网络进行任何往返。
在App Router 架构下,所有组件默认被看作是服务端组件,无需任何声明。当然,你可能会想到服务端组件是不是使用 'use server'——NO,不是!'use server' 其实是用在 Server Actions,而非服务端组件上的,不过这块内容超出了本文范围就不讲了,有兴趣的同学可以私下学习。
Server Action特性就是为了实现以上2个目标。 首先来看第一个目标。 目标1 HTML原生的form元素有个action属性,可以接收一个url。当提交表单(比如点击type为submit的按钮)后formData会提交给该url。 First name: Last name: 由于「提交表单」的行为是HTML原生支持的,所以在禁用JS的情况下也...