with SSG/SSR how to render a deep nested component which requires fetch to render

[dohomi]

Hi Guys

I am using currently SSR but might will switch to SSG. I have a few deep nested components which requires a fetch call to an API. How could I solve this? For SEO reasons it would be important that the NextJS render waits till all data is present. Inside of pages I make use of initialPageProps but how to do this outside of the pages?

Thanks

[timneutkens]

In general you should do this data fetching at the top level.

However there's a few ways that you can do performant data fetching with nesting without doing full React tree rendering, eg Apollo getDataFromTree does a full React tree render for every Query component or hook that you use which is generally not what you want for performance reasons.

@jescalan created a relay-like library that works pretty well: https://github.com/hashicorp/rivet-graphql
You can use a similar approach not just for GraphQL.

[dohomi]

@timneutkens this looks interesting I'll check this out.

My current issue is following: my component tree from my headless API consist of list widgets which fetch again content from the API.

Currently I fetch a subset from all pages to render these list widgets and pass these subset as a provider to my child components. But as some projects are quite big the array gets quite huge.

I know about getDataFromTree but you won't recommend the use?

[timneutkens]

I know about getDataFromTree but you won't recommend the use?

Yes, as explained I wouldn't use it because of massive performance overhead.