Tengo una aplicación NextJS donde tengo una página de inicio ( index.js ) y otras dos páginas Acerca de ( about.js ) y Contáctenos ( contact.js ).

Creé un archivo BaseLayour.js con el componente MyApp de _app.js en el archivo _app.js.

 import React from "react"; import BaseLayout from "../layouts/BaseLayout"; function MyApp(props) { const { Component, pageProps } = props; return ( <BaseLayout> <Component {...pageProps} /> </BaseLayout> ); } export default MyApp;

Este componente BaseLayout se ve así:

 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;

Como puede ver arriba en el archivo BaseLayout, hay un componente SEO (React). Contiene algunos metadatos comunes para todas las páginas. Tengo una API ( api/getmetadata/ ) que entrega todos los metadatos en formato JSON.

Se supone que estos metadatos se cargan en el lado del servidor para que la página se optimice para SEO.

¿Cómo podemos llamar a la API para recuperar los datos en cada solicitud, pero solo en el lado del servidor?

Lo que he intentado hasta ahora -

1. Intenté llamar a la API en el componente SEO en sí, pero no se ejecuta en el lado del servidor, ya que es solo un componente React.
2. Intenté crear un contexto React y llamé a la API desde los componentes SEO/BaseLayout, la llamada a la API aún no se realiza desde el lado del servidor.
3. Intenté usar getServerSideProps en la página index.js para llamar a la API y recuperar los datos, lo que funcionó perfectamente, pero el problema es que necesitamos compartir los datos entre todas las páginas, no solo la página de inicio de index.js .

Cualquier ayuda será apreciada. Si de alguna manera podemos hacer la llamada API y recuperar los datos en el componente SEO, resolverá nuestro problema.

Gracias de antemano chicos.