Next.js 13中如何结合Chakra UI使用React Server Component？

Chakra UI的核心组件（比如Text）底层依赖React客户端钩子（如useState、useEffect），而React Server Component（RSC）默认不允许使用这类客户端API，这就是你触发ReactServerComponentsError的原因。以下是几种可行的解决方案：

方案一：将使用Chakra UI的组件标记为客户端组件 #

在直接使用Chakra组件的文件顶部添加'use client'指令，把该文件声明为客户端组件，就能正常使用依赖客户端钩子的Chakra组件。

示例代码：

'use client'

import { Text } from '@chakra-ui/react'

export default function ClientText({ data }) {
  return <Text>{data}</Text>
}

之后在服务端组件中负责数据获取，并将数据传递给这个客户端组件：

// 服务端组件，无需添加'use client'
import ClientText from './ClientText'

async function fetchData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function ServerComponent() {
  const data = await fetchData()
  return <ClientText data={data.content} />
}

方案二：封装Chakra UI客户端Provider #

如果项目中大量使用Chakra组件，可以封装一个顶层客户端组件来包裹Chakra的Provider，统一处理客户端环境依赖，再在服务端组件中嵌套使用。

示例代码：
首先创建ChakraClientProvider.jsx：

'use client'

import { ChakraProvider } from '@chakra-ui/react'

export default function ChakraClientProvider({ children }) {
  return <ChakraProvider>{children}</ChakraProvider>
}

然后在服务端组件中使用：

import ChakraClientProvider from './ChakraClientProvider'
import ClientText from './ClientText'

async function fetchData() {
  // 数据获取逻辑
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function ServerComponent() {
  const data = await fetchData()
  return (
    <ChakraClientProvider>
      <ClientText data={data.content} />
    </ChakraClientProvider>
  )
}

方案三：使用无钩子的静态组件（限部分场景） #

少数Chakra组件支持纯静态模式（无需客户端钩子），但这类组件范围有限，仅适合简单文本、布局类场景，大部分交互型组件仍需依赖客户端环境，因此优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者DaMatt91