Next.js SSR页面：无需props传递API数据给嵌套子组件的方案？

在Next.js的SSR场景下，你可以通过React Context实现服务端数据的跨组件传递，避免props层层传递的问题，且该方案完全支持服务端渲染。下面是具体实现步骤：

代码结构示例（翻译后） #

Home(数据)
--ParentComp1（父组件1）
  -- Tab1(数据.part1)
  -- Tab2(数据.part2)

实现步骤 #

1. 创建数据Context #

新建一个Context文件（比如/contexts/DataContext.js），封装Context和自定义Hook：

import { createContext, useContext } from 'react';

// 初始化Context，默认值设为null
const DataContext = createContext(null);

// 导出Provider组件和自定义Hook
export const DataProvider = DataContext.Provider;
export const useData = () => useContext(DataContext);

2. 在页面组件中注入服务端数据 #

在页面的index.js中，通过getServerSideProps获取数据后，用DataProvider包裹子组件，将数据注入Context：

import { DataProvider } from '../contexts/DataContext';
import ParentComp1 from '../components/ParentComp1';

// 服务端获取数据
export async function getServerSideProps() {
  const apiRes = await fetch('你的API接口地址');
  const data = await apiRes.json();

  return { props: { data } };
}

export default function Home({ data }) {
  // 用DataProvider把数据传递给所有嵌套子组件
  return (
    <DataProvider value={data}>
      <ParentComp1 />
    </DataProvider>
  );
}

3. 嵌套子组件直接取用数据 #

在Tab1、Tab2这类深层子组件中，直接通过自定义HookuseData获取所需数据，无需父组件传递props：

// Tab1.js
import { useData } from '../contexts/DataContext';

export default function Tab1() {
  const data = useData();
  return <div>{/* 直接使用data.part1渲染内容 */}</div>;
}

// Tab2.js
import { useData } from '../contexts/DataContext';

export default function Tab2() {
  const data = useData();
  return <div>{/* 直接使用data.part2渲染内容 */}</div>;
}

关键说明 #

• 该方案完全兼容SSR：服务端渲染时，Context的值会被注入到HTML中，客户端hydrate时会复用服务端传递的数据，不会出现内容不匹配的问题。
• 避免Props Drilling：ParentComp1无需接收和中转数据，只需要作为组件容器存在，简化了组件逻辑。
• 可按需拆分Context：如果data的各个部分独立性较强，可以拆分多个Context（比如Part1Context、Part2Context），让子组件只获取自己需要的数据，进一步优化性能。

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