I have a NextJS application where I have a home page (index.js) and two other pages About(about.js) & Contact Us(contact.js).

I have created a BaseLayour.js file with is wrapping NextJS's MyApp component in _app.js file.

import React from "react";

import BaseLayout from "../layouts/BaseLayout";

function MyApp(props) {
  const { Component, pageProps } = props;

  return (
    <BaseLayout>
      <Component {...pageProps} />
    </BaseLayout>
  );
}

export default MyApp;

This BaseLayout component looks like this -

import React from "react";

import SEO from "../components/SEO";
import Header from "../components/Header";
import Footer from "../components/Footer";

function BaseLayout(props) {
  const { children } = props;

  return (
    <div>
      <SEO />
      <Header />
      {children}
      <Footer />
    </div>
  );
}

export default BaseLayout;

As you can see above in the BaseLayout file, there is an SEO component (React). It contains some common metadata for all the pages. I have an API(api/getmetadata/) that delivers all the metadata in JSON format.

This metadata is supposed to load on the server-side so that the page will be optimized for SEO.

How can we call the API in order to retrieve the data on each request but only on the server-side?

What I have tried till now -

1. Tried calling API in the SEO component itself, but it is not running on the server-side as it is just a React component.
2. Tried creating a React context, and called the API from SEO/BaseLayout components, the API call is still not being made from the server-side.
3. Tried using getServerSideProps in the index.js page to call the API and retrieve the data, which worked perfectly, but the problem is we need to share the data between all the pages, not just the index.js home page.

Any help will be appreciated, If we can somehow make the API call and retrieve the data in the SEO component, it will solve our problem.

Thank you in advance guys.