// 在组件中定义一个 Server Action"use server";asyncfunctionfetchData(){constresponse=awaitfetch("https://api.example.com/data");constdata=awaitresponse.json();returndata;}exportdefaultfunctionMyComponent(){constdata=fetchData();// 直接调用 Server Actionreturn{data};} 在这个例子中,fetchData是一...
Server Actions 是 Nextjs 基于 React Actions 来实现的,只不过它始终运行于服务端,它始终是 server action(就和它的名字一样)。 Server Actions 示例 示例代码仓库在这里。 示例中,简单通过 Server Actions 实现了一个登录表单,并在服务端持久化已登录的用户,并在客户端将数据以列表形式渲染,如图: 这里针对示例...
就约等于 Next.js 帮我们实现了 http 接口的创建,返回数据处理。重建 Next.js 应用的心智模型。 server actions 因为服务端不再暴露 http 的方法接口地址,只有该 server actions 函数能进行数据的调用。并且返回的数据结构为 React 流(参考文档)。虽然可以通过手动添加 http request header Next-Action 属性来达到伪...
就约等于 Next.js 帮我们实现了 http 接口的创建,返回数据处理。重建 Next.js 应用的心智模型。 server actions 因为服务端不再暴露 http 的方法接口地址,只有该 server actions 函数能进行数据的调用。并且返回的数据结构为 React 流(参考文档)。虽然可以通过手动添加 http request header Next-Action 属性来达到伪...
Next.js@13 提供了一个叫 server action 的功能,可以省略创建 http 接口的过程,客户端可以直接调用服务端的方法。 开发 这次的功能开发涉及的文件较多,就只针对“移动”功能做详细解释。其余的两个可以在源码中查看。 文件树 explorer/src/components/move-modal/action.ts ...
Next.js可以更好地优化构建输出,因为它可以清晰地区分客户端和服务器代码。 8. 更容易实现服务器端重定向 在提交表单后执行重定向变得更加简单,可以直接在Server Action中完成。 9. 减少客户端JavaScript 这种方法减少了需要发送到客户端的JavaScript量,提高了首次加载性能。
Next.js@13 提供了一个叫 server action 的功能,可以省略创建 http 接口的过程,客户端可以直接调用服务端的方法。 开发 这次的功能开发涉及的文件较多,就只针对“移动”功能做详细解释。其余的两个可以在源码中查看。 文件树 explorer/src/components/move-modal/action.ts ...
❌ Server Actions只能在服务器组件中使用 在客户端组件中也可以使用Server Actions (译者注:可以通过传递'use server'的方法到客户端组件去,会自动生成隐蔽的API方法) ❌ Server Actions完全替代了API Routes Server Actions和API Routes的用法不同,可以同时使用它们。Server Actions通过带有action的form表单提交作为...
这是用于存放Server Actions的最佳实践。 - pages/ - server/ - actions/ - ... 现在我们已经准备好开始编写我们的Server Actions逻辑了。 3.编写Server Actions逻辑 在`actions`文件夹中,我们可以创建一个名为`example.js`的文件,以存放我们的第一个Server Action逻辑。 javascript server/actions/example.js ...
是不是很像直接调用了写入数据库的一个函数？其实这是Nextjs独有的功能，叫Server Action 将服务端函数自动转换为一个http调用，他的执行环境仍然在服务端，如果在客户端直接写入数据库那不就乱套了嘛。所以请不要担心前端操作了数据库，addTodo也可以用你熟悉的http请求来实现。接下来我们修改src/app/page.tsx代码...