如何为React Server Components（Next.js 13.2）提供上下文（如主题）？

React Server Components（RSC）本身确实不支持useContext这类客户端钩子，这是因为RSC在服务端渲染阶段无法访问客户端的状态上下文。针对你遇到的主题模式问题，有几个实用的解决思路：

1. 将依赖上下文的UI抽为客户端组件 #

把服务端组件里需要用到主题的部分单独拆成客户端组件，让这个客户端组件去消费ThemeContext，服务端组件只负责渲染不需要客户端上下文的内容。

示例代码：

// components/ThemeDrivenSection.client.js
'use client';

import { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

export default function ThemeDrivenSection({ content }) {
  const theme = useContext(ThemeContext);
  return <div className={theme}>{content}</div>;
}

// app/ServerComponent.js
import ThemeDrivenSection from '@/components/ThemeDrivenSection.client';

export default async function ServerComponent() {
  // 服务端数据请求等操作
  const serverData = await fetchSomeServerData();
  
  return (
    <div>
      {/* 服务端渲染的静态内容 */}
      <h2>{serverData.title}</h2>
      {/* 依赖主题的部分交给客户端组件 */}
      <ThemeDrivenSection content={serverData.content} />
    </div>
  );
}

2. 从服务端直接获取上下文相关值（如果可行） #

如果主题模式存储在服务端可访问的位置（比如Cookie、请求头），可以在服务端直接读取这些值，再通过props传递给服务端组件。

比如在Next.js的页面组件中读取Cookie：

// app/page.js
import { cookies } from 'next/headers';
import ServerComponent from './ServerComponent';

export default async function Page() {
  const cookieStore = cookies();
  const theme = cookieStore.get('theme')?.value || 'light';
  
  return <ServerComponent theme={theme} />;
}

// app/ServerComponent.js
export default async function ServerComponent({ theme }) {
  return (
    <div className={theme}>
      {/* 服务端渲染的内容，直接使用传入的theme */}
    </div>
  );
}

3. 通过客户端组件中转上下文值给服务端组件 #

如果主题是客户端动态切换的状态，可以用一个客户端组件作为中间层，先消费上下文拿到主题值，再把值作为props传给服务端组件。

示例代码：

// components/ThemeWrapper.client.js
'use client';

import { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';
import ServerComponent from '../app/ServerComponent';

export default function ThemeWrapper() {
  const theme = useContext(ThemeContext);
  return <ServerComponent theme={theme} />;
}

然后在页面中使用这个客户端包装器：

<!-- app/layout.js -->
<html>
  <body className="page-container">
    <ThemeProvider>
      <ThemeWrapper />
    </ThemeProvider>
  </body>
</html>

这样服务端组件就能通过props拿到客户端的主题值，同时保持自身的服务端渲染特性。

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