在组件级别获取数据并预渲染/ ssr nextjs

如何解决在组件级别获取数据并预渲染/ ssr nextjs

我是第一次使用Nextjs。

我正在尝试创建由<Header><different-layouts-for-each><Footer>结构组成的多个布局。

我面临的问题是getStaticProps或getServerProps只能在页面级别运行。

由于导航中需要SEO，我想我应该使用上述两种方法之一在每个页面文件上获取它的道具。

这里的问题是我必须在每个页面上都获得菜单道具，但是要使用不同的模板，我必须在所有页面上重复我自己，以便静态或预先呈现内容并成为SEO可读。

在<MainNav>组件上获得菜单道具将是理想的情况。

我尝试在组件上进行asnyc / await：

<Header>组件

import Logo from "../components/header/logo";
import MainNav from "../components/header/mainnav.js";
function Header() {
    return (
        <div className="headwrapper container mx-auto py-8 flex items-center">
            <Logo />
            <MainNav/>
        </div>
    );
}

export default Header;

<MainNav>组件

import Link from "next/link";
import { WpHeader } from "../../lib/wpapi";
import React,{ useEffect,useState } from "react";

function MainNav() {
    const [nav,setNav] = useState(0);
    useEffect(() => {
        const fetchData = async () => {
            const wp = new WpHeader();
            const call = await wp.getAxiosMenu();
            console.log(call);
            setNav(call);
        };
        fetchData();
    },[]);

    return (
        <div className="navigation text-right w-3/4">
                <ul className="main-navigation">
                    {nav
                        ? nav.map(item => (
                                <li key={item.id} className="inline-block mx-2">
                                    <Link href={item.path}>
                                        <a>{item.label}</a>
                                    </Link>
                                </li>
                          ))
                        : "loading"}
                </ul>
        </div>
    );
}

export default MainNav;

这里的问题是，这将返回一个承诺，并且html将显示“正在加载”，而不是实际的菜单html。

在这方面有什么帮助或文章可以帮助我吗？

谢谢。