Получение данных на уровне компонентов и предварительная визуализация /ssr nextjs

Question

Я впервые работаю с 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 меню.

Любая помощь или статья, которая могла бы мне помочь в этом?

Благодарю.