fetching data inside RootLayout

Unanswered

Britannia Petite posted this in #help-forum

Britannia PetiteOP

2024-02-22T19:31:19.000Z

As the doc specify that Layouts are server component, why I canâ€™t fetch data in the root layout component (root layout = with the hml tag) ?

When I tru to await/ fetch, I got an error telling that I need the function to be async (ok I understand) but as soon as I turn my RootLayout function Component into an async func, I got this error :

 Error: Expected a suspended thenable. This is a bug in React. Please file an issue.

Any help would be much appreciated

6 Replies

Plott Hound

2024-02-22T19:36:04.000Z

Share your layout code

Britannia PetiteOP

2024-02-22T23:11:07.000Z

I think the error comme with the intl usage of hook useMessage inside server component, but error was not clear... still don't know how to get intl working along with fetch in rootlayout

import {NextIntlClientProvider, useMessages} from 'next-intl';

export default async function RootLayout({
    children,
    params: { locale }
}: IPropsLayout) {
   const messages = useMessages();
   const whatever = await fetchWhatever();

// ...
 return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Tonkinese

2024-02-23T04:45:50.000Z

You canâ€™t use a hook in a server component. If you remove use messages what happens?

@Britannia Petite I think the error comme with the intl usage of hook useMessage inside server component, but error was not clear... still don't know how to get intl working along with fetch in rootlayout js import {NextIntlClientProvider, useMessages} from 'next-intl'; export default async function RootLayout({ children, params: { locale } }: IPropsLayout) { const messages = useMessages(); const whatever = await fetchWhatever(); // ... return ( <html lang={locale}> <body> <NextIntlClientProvider messages={messages}> {children} </NextIntlClientProvider> </body> </html> ); }

Plott Hound

2024-02-23T08:41:08.000Z

yeah this is wrong. you cant use client hooks in a server component, follow the guide on their site https://next-intl-docs.vercel.app/docs/getting-started/app-router

Britannia PetiteOP

2024-02-23T10:01:58.000Z

yeah, find out that next-intl is providing

getMessages()

for server side component

I think my mistake came from next.js not erroring the fact I was using hook server side... really weird...