rough outline for RSC prefetching

[phryneas]

This would enable manual endpoint prefetching from Server Components:

function Page() {
  return (
    <PrefetchEndpoints
      baseQuery={baseQuery}
      run={async (prefetch) => {
        // immediate prefetching
        const promise1 = prefetch(api.endpoints.foo, 'bar')
        const promise2 = prefetch(api.endpoints.foo, 'baz')
        // and a "dependent endpoint" that can only be prefetched with the result of the first two
        const result1 = await promise1
        const result2 = await promise2
        prefetch(api.endpoints.foo, result1 + result2)
      }}
    >
      foo
    </PrefetchEndpoints>
  )
}

Drawbacks:

• as RTK currently doesn't have suspense, this will still render a loading state in SSR. We could add a "blocking" boolean option that could be set on the RSC side e.g. when a crawler request is detected to finish all requests before handing off to client components, so the SSR run would render the final data

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c9756bd:

Sandbox	Source
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration