如何在 next.js 中使用动态菜单组件

Question

伙伴。我的 next.js 网络应用中有一个 菜单组件。菜单的数据通过 GraphQL 动态获取。我想要菜单组件的服务器端渲染。我尝试使用 getStaticProps() 在服务器上呈现数据。但是 getStaticProps() 对组件不起作用，它只对页面起作用。

现在，我该如何解决这个问题？我不想在每个页面上为菜单复制相同的代码，我想重复使用代码或类似的东西。请帮助我摆脱这个问题。提前致谢。

这是我的菜单渲染代码：

导出异步函数 getStaticProps() { 常量客户端 = 新的 ApolloClient( {uri：'http://portfolio.local/graphql'，缓存：新的 InMemoryCache()} ); const {data} = 等待客户端.query({ 查询：gqlquery 我的查询{ 菜单项 { 边{ 节点{ ID 标签 } } } } }); 返回 { 道具： { 菜单：data.menuItems.edges } } }

Answer 1

为什么不直接在前端调用数据？没有“getStaticProps”或“getServerSideProps” 正如你所说，它是一个菜单，所以数据对 SEO 来说并不重要。

function MenuComp() {
const [data, setData] = React.useState()
  
React.useEffect(async ()=>{
  const client = new ApolloClient(
        {uri: 'http://portfolio.local/graphql', cache: new InMemoryCache()}
    );

    const {data} = await client.query({

    query:gqlquery
        MyQuery{
            menuItems {
                edges {
                    node {
                        id 
                        label
                    }
                }
            }
        }

    });
   setData(data)
},[])

return (...your component)
}