Next.js getInitialProps в компоненте глобального макета
Я создаю веб-сайт, используя next.js, и пытаюсь понять следующую «проблему». У меня есть статические данные (текст веб-сайта), которые необходимо получить из конечной точки API (Headless CMS).
Для отдельных страниц я использую getInitialProps для получения необходимых данных. Однако у меня также есть компонент нижнего колонтитула в моем основном макете. Как макет, так и компонент Footer не имеют решения getInitialProps, так как же с этим справиться "красивым" способом?
Некоторые решения, о которых я подумал:
- Я могу использовать componentDidMount для выполнения выборки на стороне клиента данных в компоненте нижнего колонтитула (но я действительно хочу, чтобы сервер извлекал / делал его статическим).
- Переместите нижний колонтитул на каждую страницу и сделайте
getInitialPropsдоступным, добавив несколько HOC, чтобы предотвратить перезапись всего кода. - Как я уже сказал, данные статичны, поэтому сделайте их доступными глобально через server.js или _document.js (хотя я не знаю, как это сделать).
Кто-нибудь, кто может указать мне правильное направление?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете поместить компоненты верхнего и нижнего колонтитула в _app.js.
Во-первых, в App.getInitialProps извлеките любые данные или выполните любые действия, которые вам нужны, чтобы произойти на стороне сервера. Затем эти данные, которые вы возвращаете, могут быть возвращены как реквизиты в сочетании с результатом Component.getInitialProps (getInitialProps вашего компонента страницы).
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
// Make any initial calls we need to fetch data required for SSR
const isAuthed = await ctx.reduxStore.dispatch(checkAuth());
// Load the page getInitiaProps
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps({ isAuthed, ...ctx });
}
return { pageProps: { ...pageProps, isAuthed } };
// Or, if the async data is separate from your page props:
// { pageProps, data: { isAuthed } };
}
В вашей функции рендеринга у вас есть доступ к this.props.pageProps (или this.props.data, если вы его разделили). Затем вы можете передать это в свой верхний и нижний колонтитулы.
<Header {...pageProps} />
<main>
<Component {...pageProps} />
</main>
<Footer {...pageProps} />