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

Question

伙伴。我有一个菜单组件在我的next.jsWeb应用程序。菜单的数据是通过GraphQL动态生成的。我想要菜单组件的服务器端渲染。我尝试使用getStatic Props（）在服务器上呈现数据。但是getStatic Props（）不能在组件上工作，它只能在页面上工作。

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

这是我的菜单渲染代码：

export async function getStaticProps() {

    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
                    }
                }
            }
        }

    });

    return {

        props: {

            menus: 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)
}