Lazy evaluation of SSR fallbacks

[GeorgeTaveras1231]

I like what this library does to decouple components (parent with child components) by removing the need for fetching all shared data at the root of the app. However, it seems like it doesn't fully decouple child components from its containers on the server side -- On the server side, I still need to know all of the data that is fetched by my app before I can provide it as a fallback. If I don't I risk under/over fetching. I imagine this could be solved by lazy evaluation of fallbacks, which are provided as async functions, and evaluated when requested.

// Falbacks provided by server
const fallback = {
  '/path/to/api-1': async () => {
    const res = await fetch('/path/to/api-1');
    return res.json()
  },
  '/path/to/api-2': async () => {
    const res = await fetch('/path/to/api-2');
    return res.json()
  }
}

<SWRConfig value={{ fallback }}>
  <App />
</SWRConfig>

Is there a way to lazily evaluate SSR-provided fallbacks? I'm assuming not since it isn't documented. Also seems like the implementation is not trivial, since SSR of react components is a sync operation. Would probably require rendering multiple times, once to extract the request keys, once the request keys are extracted, fetch only the requested keys, then render again using the downloaded fallback data.

Have you guys thought about this issue?

Update 10/27/2021

I believe Apollo has a solution to this problem; likely solved in a similar way to my suggestion (render the react tree to extract request keys)

https://www.apollographql.com/docs/react/api/react/ssr/#getdatafromtree