Server Actions 是 Nextjs 基于 React Actions 来实现的,只不过它始终运行于服务端,它始终是 server action(就和它的名字一样)。 Server Actions 示例 示例代码仓库在这里。 示例中,简单通过 Server Actions 实现了一个登录表单,并在服务端持久化已登录的用户,并在客户端将数据以列表形式渲染,如图: 这里针对示例...
复制 // 在组件中定义一个 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 integrate with the Next.jscaching and revalidationarchitecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip. Behind the scenes, actions use thePOSTmethod, and only this HTTP method can invoke them. The arguments a...
Server Actions integrate with the Next.jscaching and revalidationarchitecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip. Behind the scenes, actions use thePOSTmethod, and only this HTTP method can invoke them. The arguments a...
在视图层(与用户交互的页面),为了保持状态,我们需要在文件中首行写上'use client'编写代码来处理State状态。通过使用useFormState并将signin作为第一个参数,我们可以获取state和dispatch。其中,state是从Server Actions函数返回的状态,dispatch是用于向表单传递action的函数。
Next.js可以更好地优化构建输出,因为它可以清晰地区分客户端和服务器代码。 8. 更容易实现服务器端重定向 在提交表单后执行重定向变得更加简单,可以直接在Server Action中完成。 9. 减少客户端JavaScript 这种方法减少了需要发送到客户端的JavaScript量,提高了首次加载性能。
以下是使用Next.js 14的Server Actions的基本步骤: 1.定义服务器端函数: 在Next.js中,您可以在pages目录下的.tsx或.jsx文件中定义服务器端函数。例如,您可以创建一个api目录下的user.ts文件,在其中定义一个服务器端函数: typescript // api/user.ts exportdefaultfunctionhandler(req, res) { //处理请求并返...
现在,我们已经编写好了我们的第一个Server Action逻辑,接下来我们需要告诉Next.js如何使用它。 4.注册Server Actions 要在Next.js应用程序中使用Server Actions,我们需要将它们注册到页面渲染过程中。 在项目的根目录下创建一个名为`next.config.js`的文件,并添加以下代码: javascript next.config.js module.exports...
在Next.js 14 中,Next.js 团队通过稳定版本的 Server Actions 改进了开发者在编写数据变更方面的体验。 Server Actions 允许开发者定义异步服务器函数,使用 Server Actions 来重新验证缓存数据、重定向到不同的路由、设置和读取 cookie 等等。 现在,只需在 React 组件中定义一个函数,就能在服务器上安全地执行操作。
总的来说，Server Actions 是 Next.js 开发中不可或缺的一部分，它巧妙地扩展了我们的开发工具箱，使得在实际工作中能够更加高效地处理数据提交和验证。但记住，它并非万能良药，了解其适用场景和与 API Routes 的协作是关键，这将帮助你在项目中得心应手地运用 Server Actions 的力量。