Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

39

.99

$

29

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Menu Link Complexities & SSR

This video is about #12 Menu Link Complexities & SSR

Downloads

Become a pro to download code and videos

Comments

Nathan

almost 2 years ago [edited]

Hi guys,

I avoided a lot of boilerplate code by just passing the menu data from the page directly to the grand-child by using component composition. No need to create a Menu component and Pagewrapper.

(Just make sure you pass the children prop through the Layout and Header files.)

My index.js:

export default function Home({ links, posts }) {
      return (
        <Layout>
          <Header>
            <MainNav links={links} />
          </Header>
          <h2>Home Page</h2>
        </Layout>
      );
    }

    export async function getServerSideProps() {
      const [data1, data2] = await Promise.all([
        fetch(`${Config.apiUrl}/wp-json/wp/v2/posts?per_page=3`),
        fetch(`${Config.apiUrl}/wp-json/menus/v1/menus/main-nav`),
      ]);
      const posts = await data1.json();
      const links = await data2.json();
      return {
        props: {
          posts,
          links,
        },
      };
    }

Want to join the conversation?

Become a Pro member today!