0

I'm working with Nextjs for the first time.

I'm trying to create multiple layouts which will consist on a <Header><different-layouts-for-each><Footer> structure.

The issue that I'm facing is that getStaticProps or getServerProps can run at the page level only.

Since I need SEO on the navigation I suppose I should get it's props on every single page file using one of the two mentioned methods.

The problem here is that I'd have to get the menu props on each one of the pages, but having different templates I will have to repeat myself on all of them in order to bring the content statically or prerendered and be SEO readable.

Getting the menu props on the <MainNav> component would be the ideal situation.

I tried doing an asnyc/await on the component:

<Header> component

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

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;

The issue here is that this will return a promise and the html will show "loading" instead of the actual menu html.

Any help or article that could help me on this?

Thanks.

Jaypee
  • 1,272
  • 5
  • 17
  • 37
  • It looks like your MainNav Component is dependent on Data. Have a look on this https://nextjs.org/docs/basic-features/pages#static-generation-with-data , you need to use getstatic props for SSR. – Vibhav Oct 23 '20 at 20:25
  • Hi @Vibhav yes, I understand that, but getStaticProps can only be used at a page level, not at a component level, it's explained on my description. – Jaypee Oct 23 '20 at 20:29
  • I think you need to create a wrapper based on your url you can make the api call on getstaticprops – Vibhav Oct 23 '20 at 20:37
  • Sounds interesting, do you have any example I can see of that? – Jaypee Oct 23 '20 at 20:40
  • https://github.com/vercel/next-site/blob/master/pages/docs/%5B%5B...slug%5D%5D.js. Suppose you have two routes one is /about-us and one is /home based on your route you can change the api call url. – Vibhav Oct 23 '20 at 20:42
  • have a look on this too https://github.com/vercel/next.js/discussions/17257 – Vibhav Oct 23 '20 at 20:45
  • Hi @Vibhav thanks for your answer, the concept is similar to what I'm doing but instead of getting the data on the component it does it on the page level using getStaticProps, the issue with that, as I'm trying to describe, is what happens if you have 60 files (templates) on your pages directory? You will have to do the same thing on all of them instead of doing once at the component level. – Jaypee Oct 23 '20 at 20:55
  • Hey @Javpee I have gone through your code. You are Doing Client Side rendering. Through this what I meant too say is that whenever your page load it will wait to fetch data and after fetching it, your navbar of footer will be shown. So, In case when Search Engine Crawl for your page they won't find the Footer and Navbar. I will suggest you too have a look on client side and server side again. and then decide which best suits you – Vibhav Oct 23 '20 at 21:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223532/discussion-between-vibhav-and-jaypee). – Vibhav Oct 23 '20 at 21:03
  • hi again, correct. That’s why I was asking if I can do server rendering but from a component or even app.js instead of a page. Thanks. – Jaypee Oct 23 '20 at 21:03
  • What I can suggest is opt in for dynamic routing if you have similar pages. – Vibhav Oct 23 '20 at 21:09
  • Jaypee, can you help me sort out my problem related to SSR in my react js app. I couldn't use the use-sse hook in react js, unable to fetch data, if you can look into my problem here https://stackoverflow.com/questions/72220011/is-there-any-method-to-overcome-the-error-of-hydration-ui-in-next-js-while-using – Beren May 15 '22 at 06:41

0 Answers0