'use server'; export default async function requestUsername(formData) { const username = formData.get('username'); if (canRequest(username)) { // ... return 'successful'; } return 'failed'; } // UsernameForm.js
如果组件在带有'use client'指示符的模块中定义,或者组件在客户端组件中导入并调用,那么组件的使用将是客户端组件。 否则,组件的使用将是服务器组件。 渲染树展示了组件的使用。 回到关于FancyText的问题,我们可以看到组件定义没有包含'use client'指示符,并且它有两个使用方式。
首先是位于代码顶部的'use client'声明,使用方式类似于严格模式的声明: 'use strict'; // 此处是严格模式下的JavaScript代码 'use client'声明是RSC(React Server Component,服务端组件)协议中的定义。 启用了RSC的React应用,所有组件默认在服务端渲染(可以通过Next v13体验),只有声明'use client'的组件文件,会...
使用交互式客户端组件渲染select元素。用Server Component呈现国际化的option元素，并将它们作为children传递给select元素。让我们为客户端实现select元素。'use client';import {useRouter} from'next-intl/client';exportdefaultfunctionOrderBySelect({orderBy, children}) {const router = useRouter();functiononChange(...
“use client” 指令 在React 服务器组件的范式中,有一点非常重要:默认情况下,Next.js 应用中的每一个组件都被视为服务器端组件。 为了定义客户端组件,我们必须在文件的顶部包含一个指令,换句话说,一条特别的指示:“use client”。这个指令就像是我们从服务器端过渡到客户端的通行证,也是我们定义客户端组件的方...
“use client”与“use server”是为全栈 React 框架设计的捆绑器功能。它们负责标记两种环境之间的“分割点”:“use client”指示捆绑器生成〈script〉标签(例如 Astro Island),而“use server”则告知捆绑器生成 POST 端点(例如 tRPC Mutations)。二者配合将编写出可复用组件,借此将客户端交互与相关服务器端逻辑结...
React 中所有组件默认都是客户端的。只有当你使用 'use server' 时,组件才是服务器组件。 下面的代码是在 React 中,但将在服务器端运行。你只需要在组件的第一行添加 'use server'。这将使组件成为“服务器组件”。它不会在客户端运行,只会在服务器端运行。
这与API 端点并没什么不同……但一旦我们到达前端,魔法就开始了。我们可以导入该服务器动作并将其传递给表单的 action prop。然后,为了获得我提到的那个简单的 isPending 状态,我们利用 React 的新 useActionState 钩子: "use client" import { useActionState } from "react"import saveContactFormAction from "...
用Rust搭建React Server Components 的Web服务器 服务器组件的想法已经流传了多年,Next.js是第一个在生产环境中实现它们的。从Next.js 13开始,默认情况下所有组件都是服务器组件。要使组件在客户端运行,我们需要使用'use client'指令。 在React 19中,服务器组件将直接集成到React中,带来了一系列优势: ...
在Next.js 中,所有组件默认都是服务器组件。这就是为什么我们需要使用"use client"明确地定义我们的客户端组件。还有一个"use server"指令,但它用于服务器操作(这些是从客户端调用但在服务器上执行的类 RPC 操作)。你不使用它来定义你的服务器组件。