suggestion needed
Answered
Sweat bee posted this in #help-forum
Sweat beeOP
hey I am using nextjs with contentful and try to pretty much prerender everything from contentful. I fetch the data via graphql on pagelevel but unfortunately I end up in a lot of prop drilling... So I am curious is there any way of having some kind of global state like Zustand with maintaining the majority of my app stays on the server? For example is it possible to fetch data on the page put all the linked entries from contentful into Zustand and then access them where I need it?
Answered by Rafael Almeida
to be clear, client components are still pre-rendered on the server so there's no such thing as "keeping the app on the server" since it never stops being rendered there
to answer the question, I suppose you mean keeping all components as RSC since you can't use context there. since
to answer the question, I suppose you mean keeping all components as RSC since you can't use context there. since
fetch requests are deduped you can create a shared function that fetches the content from your CMS and keep calling this same function on every server components that needs the data15 Replies
@Sweat bee hey I am using nextjs with contentful and try to pretty much prerender everything from contentful. I fetch the data via graphql on pagelevel but unfortunately I end up in a lot of prop drilling... So I am curious is there any way of having some kind of global state like Zustand with maintaining the majority of my app stays on the server? For example is it possible to fetch data on the page put all the linked entries from contentful into Zustand and then access them where I need it?
You can fetch data on server side and use it on client side
Sweat beeOP
i know but i want to avoid prop drilling and only build client components if I really need them (reactivity) otherwise I want to store the data I fetched on pagelevel and access them globaly
@Sweat bee i know but i want to avoid prop drilling and only build client components if I really need them (reactivity) otherwise I want to store the data I fetched on pagelevel and access them globaly
then use getServerSideProps, which can be used in client components
@Sweat bee is your issue resolved
Sweat beeOP
no its not 😦
@Sweat bee hey I am using nextjs with contentful and try to pretty much prerender everything from contentful. I fetch the data via graphql on pagelevel but unfortunately I end up in a lot of prop drilling... So I am curious is there any way of having some kind of global state like Zustand with maintaining the majority of my app stays on the server? For example is it possible to fetch data on the page put all the linked entries from contentful into Zustand and then access them where I need it?
to be clear, client components are still pre-rendered on the server so there's no such thing as "keeping the app on the server" since it never stops being rendered there
to answer the question, I suppose you mean keeping all components as RSC since you can't use context there. since
to answer the question, I suppose you mean keeping all components as RSC since you can't use context there. since
fetch requests are deduped you can create a shared function that fetches the content from your CMS and keep calling this same function on every server components that needs the dataAnswer
Sweat beeOP
so instead of fetching the linked entries on page level I just create a helper function where I fetch the data and then use the function in all my components where I need the data... that simple?
yeah, as long as the request is the same it will be deduped within the same request
Sweat beeOP
ok
Sweat beeOP
and when I have a Client component I would just create a wapper compoenent for fetching the data and pass it via prop to the client component I guess?!
since client compoents cant be async
yeah that works
Sweat beeOP
nice
I will try that thanks