Next.js Discord

Discord Forum

Make root layout have static information on SSR pages

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
My root layout fetches data for its header and footer menus, it looks like this:
export default async function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const [mainMenuData, secondaryMenuData] = await Promise.all([
        fetchApi<Menu>({
            endpoint: 'menus',
            wrappedByKey: 'data',
            wrappedByList: true,
            query: {
                'filters[slug][$eq]': 'header-menu',
                'populate[0]': 'items',
                'populate[1]': 'items.icon',
                nested: 'true',
            },
        }),
        fetchApi<Menu>({
            endpoint: 'menus',
            wrappedByKey: 'data',
            wrappedByList: true,
            query: {
                'filters[slug][$eq]': 'header-secondary',
                'populate[0]': 'items',
                nested: 'true',
            },
        }),
    ]);

    return (
        <html lang='en'>
            <body className={aeonik.className}>
                <Header
                    mainMenuData={mainMenuData}
                    secondaryMenuData={secondaryMenuData}
                />

                <main>{children}</main>

                <Footer />
            </body>
        </html>
    );
}

Is there a way to make Next.js generate the header and footer components statically even on SSR pages, so that it doesn't have to fetch this information from the API when generating a dynamic page? I know Next.js will cache the responses the first time and will not have to do fetches again, but can we just have those components already generated without the need to fetch them at all after runtime?

0 Replies