如果组件在带有'use client'指示符的模块中定义,或者组件在客户端组件中导入并调用,那么组件的使用将是客户端组件。 否则,组件的使用将是服务器组件。 渲染树展示了组件的使用。 回到关于FancyText的问题,我们可以看到组件定义没有包含'use client'指示符,并且它有两个使用方式。
首先是位于代码顶部的'use client'声明,使用方式类似于严格模式的声明: 'use strict'; // 此处是严格模式下的JavaScript代码 'use client'声明是RSC(React Server Component,服务端组件)协议中的定义。 启用了RSC的React应用,所有组件默认在服务端渲染(可以通过Next v13体验),只有声明'use client'的组件文件,会...
'use server'; export default async function requestUsername(formData) { const username = formData.get('username'); if (canRequest(username)) { // ... return 'successful'; } return 'failed'; } // UsernameForm.js 'use client'; import {useFormState} from 'react-dom'; import requestUsern...
使用交互式客户端组件渲染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”。这个指令就像是我们从服务器端过渡到客户端的通行证,也是我们定义客户端组件的方...
这与API 端点并没什么不同……但一旦我们到达前端,魔法就开始了。我们可以导入该服务器动作并将其传递给表单的 action prop。然后,为了获得我提到的那个简单的 isPending 状态,我们利用 React 的新 useActionState 钩子: "use client" import { useActionState } from "react"import saveContactFormAction from "...
解释"use client"exportdefaultfunctionLikeButton(){constlikePost=()=>{// ...}return(Like)} 在Next.js 中,所有组件默认都是服务器组件。这就是为什么我们需要使用"use client"明确地定义我们的客户端组件。还有一个"use server"指令,但它用于服务器操作(这些是从客户端调用但在服务器上执行的类 RPC 操作...
use client和use server两个指令在 Canary 版本发布已久,终于也要在 v19 版本里加入 Stable 版本了。 此前社区频频有人因为 Next.js 在生产环境使用这两个指令而指责 Next.js 在破坏 React 生态、批评 React 团队纵容 Next.js 超前使用非稳定特性。其实大可不必,因为这两个指令就是为 Next.js 和 Remix 这样...
自上次更新以来,React 团队合并了 React 服务端组件 RFC 以批准该提案。通过 [React Server Module Conventions](React Server Module Conventions) 提案解决了悬而未决的问题,并与合作伙伴达成共识以遵循“use client”的约定。这些文档还充当 RSC 兼容实现应支持的规范。
这种声明方式借鉴了 JavaScript 的严格模式声明——'use strict'。 在App Router 架构下,所有组件默认被看作是服务端组件,无需任何声明。当然,你可能会想到服务端组件是不是使用 'use server'——NO,不是!'use server' 其实是用在 Server Actions,而非服务端组件上的,不过这块内容超出了本文范围就不讲了,有兴...