I am making a website that also is used like an app. Think Duolingo or something like that. I am thinking about how data should be fetched/cached/shared in the site with a few goals in mind:

1) Performance /load times
2) amount of reads/cost
3) ease of use /dx

Some data might be needed in various places in the app, and could be fetched once, early, and then shared with context to be able to retrieve it in client components with hooks.


I have identified a few patterns:
* Fetch data in layout with await, pass the data to context (blocking but simple)
* Fetch data with a promise, pass it to a client component, have that use the use hook and then pass it to a context/zustand
* Create an API endpoint and fetch data directly in client component using RQ and rely on cache and query key
* Fetch data in ”closest server component” and pass it down, no context

There might be more patters on ideas on how to structure this kind of website. Is there any guide or can someone share some experience with this?

Thanks all❤️