Data Fetching strategies for small pieces of data, which are first known at render

[hk86]

Currently I have some kind of data fetching for each of my page via getStaticProps. This data is provided to the client and my page can get rendered. During render a lot of further data need to get fetched. This are small pieces of data which require an API call. I do this by using useSWR. The problem is that this small pieces are not yet available on the static rendered page. When the server send the page to the client this information is not available, the have to be fetched by the client.

What I would actually like to do is, that when the server renders the site, the server also fetches the small pieces of data, so that they are rendered. Then this data need somehow to be collected in a store and needs to be send to the client, so that the client do not need to fetch them. Actually this is how I solved this issue with another framework. All the data is fetched on the server and then I send it as part of the fully rendered page to the client, after hydration the client pick ups the data and stores it in a redux store.

What would be a good approach to do this in Next.js?

[brianlovin]

It seems to me like you might be weighing the tradeoffs of getStaticProps and getServerSideProps - getStaticProps happens at build time, so whatever network requests aren't possible at that point in time will need to be deferred to the client. If that's not acceptable, you could move over to getServerSideProps so that clients always get what they need from the server at request time. The downside to this will be some performance, if you are doing a lot of computation/fetching in the SSR. So going down that path, you would be able to fetch all your data on the server at request time and rehydrate it into some state store on the client each time.

[hk86]

There must be some solution to handle it in getStaticProps. I'll try to illustrate the challenge a little bit better. Let's assume I catch some kind of data structure data in getStaticProps and pass it down to the page:

return {
    props: { data },
};

Based on data the page will be rendered and based on data I will need to fetch further information. So in theory I'm able to analyse data in getStaticProps and fetch the information there and pass it down together with data. I could make it available the in some global state, so that all components can get the information from there. Since I have different data structures I pass down to the pages it would be tedious to handle each of that seperately.

The best solution would be, that I pass data down to the page, the page is getting statically rendered and each time further information needs to be fetched, it will be fetched and rendered correctly. So that when a client access the page, he will get a fully rendered page. Ideally I would make the informatio available to useSWR as initialData, then the client wouldn't need to fetch it again.