Gatsby SSR中如何动态获取数据并在组件间共享？

Dev · 朝炜提问于 2026-01-26 20:22:22 阅读 21

框架

在开发博客页面时遇到了问题，我需要从GraphQL获取文章列表并在多个子组件间共享数据。尝试在父页面用PageQuery获取数据后通过props传递，但组件层级多时显得很麻烦。

后来改用Context API，在Layout组件里用useStaticQuery获取数据并提供给子组件，但页面加载时出现 hydration 失败警告：”Mismatching hydration markup”。这是不是SSR数据获取方式的问题？

示例代码这样写的：

{// layouts/index.js
import { useStaticQuery, graphql } from "gatsby"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql
    query {

      allMarkdownRemark {

        edges {

          node {

            frontmatter {

              title

            }

          }

        }

      }

    }
)
  return (
    <DataContext.Provider value={data}>
      {children}
    </DataContext.Provider>
  )
}
}
这样在子组件用 useContext 获取数据时就会报错，但如果是静态数据就不会出现这个问题，该怎么正确实现动态数据共享呢？

我来解答赞 8 收藏

反馈

2 条解答

UE丶士俊 Lv1

这个问题确实出在 SSR 渲染流程和数据获取方式的配合上。useStaticQuery 是编译时运行的，生成的是静态结果，但你在 Layout 这种会被复用的组件里用它，容易导致客户端 hydration 时和服务器端输出不一致，尤其是当不同页面的查询结果不一样时。

根本原因是你在非页面组件中用了 useStaticQuery，而 Gatsby 的 SSR 机制没法为每个请求动态执行这个 hook，导致服务端渲染的内容和客户端接管时的状态对不上，所以出现 "Mismatching hydration markup"。

正确的做法是把数据获取提到页面层级，用 pageQuery + context 传递，而不是在 layout 里直接查。如果你坚持要在 layout 共享数据，可以这样做：

第一，不要在 Layout 组件内部直接用 useStaticQuery。改成由页面通过 pageQuery 获取数据，然后把数据传进 Layout：

/* pages/index.js */

export const query = graphql

  query {

    allMarkdownRemark {

      edges {

        node {

          frontmatter {

            title

          }

        }

      }

    }

  }





const IndexPage = ({ data }) => (

  

    

  

)

然后在 Layout 里提供 Context：

/* layout.js */

const Layout = ({ children, data }) => {

  return (

    

      {children}

    

  )

}

这样服务端渲染时数据已经确定，客户端 hydration 就不会错。而且你还能做校验，在开发环境加个判断防止数据没传进来：

if (process.env.NODE_ENV === 'development' && !data) {
console.warn('Layout expected data but got none')
}

如果你想更彻底地支持全局共享动态数据，也可以考虑用 gatsby-plugin-ts-config 配合自定义 webpack 配置把数据注入到 bundle 中，但那太重了，不推荐。

总之核心点就一个：SSR 场景下，动态数据必须由页面 query 驱动，不能依赖 layout 内部的 useStaticQuery 去“自动”获取，否则 hydration 必然出问题。

2026-02-10 17:09

熙妍的笔记 Lv1

这问题确实挺常见的，hydration 失败警告主要是因为服务端渲染和客户端渲染的结果不一致导致的。用 useStaticQuery 在布局组件里获取数据并提供给子组件是个不错的想法，但需要注意一些细节。

首先，useStaticQuery 是为静态数据设计的，虽然它可以获取动态数据，但在某些情况下可能会导致 hydration 问题。解决方法是确保你的服务端渲染和客户端渲染逻辑完全一致。

这里有个更稳妥的做法：在 gatsby-node.js 中通过创建页面时传递数据，或者改用 StaticQuery 的替代方案 —— getServerData（如果你用的是 Gatsby v4+）。

不过最简单的方式还是调整 Context 的使用方式，确保数据在服务端和客户端都正确加载。试试下面的代码：

import React, { createContext, useState, useEffect } from "react";

import { useStaticQuery, graphql } from "gatsby";



export const DataContext = createContext();



const Layout = ({ children }) => {

  const staticData = useStaticQuery(graphql

    query {

      allMarkdownRemark {

        edges {

          node {

            frontmatter {

              title

            }

          }

        }

      }

    }

  );



  // 确保服务端和客户端数据一致

  const [data, setData] = useState(staticData);



  useEffect(() => {

    setData(staticData);

  }, [staticData]);



  return (

    

      {children}

    

  );

};



export default Layout;

关键点在于用 useState 和 useEffect 来同步数据，这样可以避免服务端和客户端的数据不一致问题。

另外，如果层级太深觉得麻烦，可以考虑用 Redux 或者其他状态管理工具，不过对于小项目来说，Context 已经够用了。折腾太多反而复杂化了。

2026-01-28 20:06