Next.js中使用无头CMS时如何避免Prop Drilling且保障SEO？

我在Next.js应用中使用无头CMS（比如Sanity.io），内容对SEO至关重要。我知道只能通过页面级的getStaticProps在服务端获取数据做预渲染（这对SEO来说是核心需求）。

现在需要把页面组件拿到的数据传递给深层嵌套的子组件，用prop drilling太繁琐，我第一反应是用React的Context API（代码如下）。但我担心构建过程中，Context API的状态没法获取到无头CMS里的值（比如SEO文本），导致预渲染的页面不包含这些SEO内容。

有没有办法通过getStaticProps把无头CMS的值传递给深层嵌套子组件同时避免prop drilling？或者Context API在SEO/预渲染场景下到底能不能用？

现有代码 #

pages/index.js #

export default function Home({textFromGetStaticProps}) {
  const value = useAppContext();
  let {seotext, setSeotext} = value.content;

  console.log("The State is currently: " + seotext);
  console.log("The value of getStaticProps is currently:  " + textFromGetStaticProps);

//Can not set this in useEffect since only runs on ClientSide!
  setSeotext(() =>{
    console.log("---> setCount läuft");
    return textFromGetStaticProps;
  })

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          The SEO Text is <a href="https://nextjs.org">{seotext}</a>
        </h1>
      </main>
    </div>
  )
}

//Fetch headless CMS Data via getStaticProps
export async function getStaticProps(context) {
  console.log("I am running Static Props");
  //API Fetch of headless CMS
  return {
    props: {textFromGetStaticProps: "SEO Text aus StaticProps"}, // will be passed to the page component as props
  }
}

appContext.js #

const AppContext = createContext();

export function AppWrapper({ children }) {
  const [seotext, setSeotext] = useState("SEO Text");
  const test = {seotext, setSeotext}
  console.log("I am Running AppContext: " + test);

  return (
    <AppContext.Provider value={{
      content: test,
    }}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

解决方案 #

1. Context API完全适配预渲染/SEO场景，只是用法有误 #

你的问题出在直接在组件渲染阶段调用setSeotext，这会导致重复渲染，而且预渲染时Context的初始状态还是默认值，客户端 hydration 后才会更新，确实会让爬虫拿到无效的SEO文本。

正确的做法是：不要用useState维护Context里的SEO数据，直接把getStaticProps拿到的数据作为Context的初始值传入，确保服务端预渲染时就能拿到真实的SEO内容。

修改后的Context代码

// appContext.js
const AppContext = createContext();

export function AppWrapper({ children, initialSeoData }) {
  // 直接用传入的服务端数据作为Context值，不需要默认state
  const seoContextValue = {
    seotext: initialSeoData,
    // 如果后续需要客户端动态更新SEO内容，再添加setter逻辑
    setSeotext: (newText) => {
      // 比如结合useState实现客户端更新：
      // const [seotext, setSeotext] = useState(initialSeoData);
      // 但核心SEO内容不需要客户端更新，保持静态即可
    }
  };

  return (
    <AppContext.Provider value={{ content: seoContextValue }}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

修改后的页面组件

// pages/index.js
export default function Home({ textFromGetStaticProps }) {
  return (
    {/* 把getStaticProps拿到的数据传入Context */}
    <AppWrapper initialSeoData={textFromGetStaticProps}>
      <div className={styles.container}>
        <main className={styles.main}>
          <h1 className={styles.title}>
            The SEO Text is <a href="https://nextjs.org">{textFromGetStaticProps}</a>
          </h1>
          {/* 深层嵌套组件直接用useAppContext获取数据 */}
          <DeepNestedComponent />
        </main>
      </div>
    </AppWrapper>
  );
}

export async function getStaticProps(context) {
  // 替换为真实的无头CMS请求逻辑
  return {
    props: { textFromGetStaticProps: "SEO Text aus StaticProps" },
  };
}

这样预渲染时，Context的seotext就是服务端获取的真实SEO内容，爬虫能直接抓取到，完全不影响SEO效果。

2. 其他替代方案 #

• 轻量化自定义Hook：如果只需要传递少量SEO数据，可以写一个自定义Hook，直接读取页面组件的props，但本质和Context逻辑类似，适合简单场景。
• next/head组件：如果只是处理页面级的SEO元数据（比如title、meta标签），直接在页面组件中用next/head渲染即可，不需要传递到深层组件。但如果深层组件需要用到SEO内容（比如页面内的标题、描述），Context仍是最优解。

关键注意事项 #

• 预渲染阶段（getStaticProps运行时），React组件的渲染在服务端完成，此时Context的取值必须是服务端已确定的静态值，不能依赖客户端状态（比如useState的初始值会被固化到预渲染HTML中）。
• 禁止在组件渲染阶段直接调用状态更新函数（比如你的setSeotext），这会触发无限渲染，且预渲染时不会生效。

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