React Server Components 里怎么用 useState？

程序员梓艺提问于 2026-02-26 23:12:22 阅读 50

框架

我在 Next.js 13 的 app 目录下写了个组件，想用 useState 管理状态，结果一保存就报错说不能在 Server Component 里用 Hook。但我这个组件明明需要交互啊，难道所有带状态的都得改成 Client Component？

我试过加 "use client" 到文件顶部，但又担心性能变差，毕竟文档说 Server Components 更快。有没有办法在保留 Server Component 的同时处理简单状态？

我来解答赞 8 收藏

反馈

2 条解答

Good“若溪 Lv1

没法在纯Server Component里用useState，必须加"use client"转成Client Component。你担心性能其实多余，Next.js会自己优化，交互部分才会在客户端执行。

正确做法是拆分组件：外层Server Component负责数据获取，内层单独拆个Client Component来管理状态。

// app/page.tsx - Server Component，负责取数据

async function Page() {

  const data = await fetchData();

  

  return (

    <div>

      <h1>{data.title}</h1>

      <Counter /> {/* 这里是独立的Client Component */}

    </div>

  );

}



// app/Counter.tsx - Client Component，负责交互状态

"use client";



import { useState } from 'react';



export default function Counter() {

  const [count, setCount] = useState(0);

  

  return (

    <button onClick={() => setCount(c => c + 1)}>

      点击次数: {count}

    </button>

  );

}

2026-03-20 09:19

景鑫 Dev Lv1

我之前也遇到过，React Server Component 里确实不能用 useState，这是设计决定的，不是 bug。
要么把组件改成 Client Component（加 "use client"），要么把状态提到上层 Client Component 里用 props 传下来，没第三条路。

简单交互就直接加 "use client"，别怕性能——现代 SSR 框架早优化好了，比你硬绕弯子强。

"use client"



import { useState } from 'react'



export default function Counter() {

  const [count, setCount] = useState(0)

  return (

    

  )

}

2026-02-26 23:26