Best way to feed context with fetched data

31 Views Asked by At

I'm working on a Next.js project without ISR, where multiple components need data from an API call made during the build.

Right now, I'm calling await getContentType(); six times in the codebase. (the result of the calls is cached, so there is only one API call on build).

To centralize data and avoid prop drilling, I'm thinking of fetching data during build, managing it with state, and feeding it to components. I plan to set this data in the context, possibly in the RootLayout.

However, I'd like to keep RootLayout as a server component. To work around this, I've created a client component to manage context data, even though it returns dummy JSX.

Any thoughts or concerns about this approach? Thanks!

PS: It's interesting to notice that at build time, I have confirmation that the data was fed in the context: enter image description here

rootlayout used the function to get the data, fed it to the datainitilizer component through props and this last one used a setter.

Do you know why client components, or code from these get executed on the server while building ?

0

There are 0 best solutions below