fix: Ensure hydration matches the SSR result during streaming

[shuding]

Problem

Here's a diagram explaining the problem:

First, In SSR, the data will always be undefined for any useSWR hook, because useEffect never runs during SSR. Same for streaming SSR because it's still SSR, but with some components being delayed a bit.

So, to make sure client hydration matches the SSR result, all useSWR hooks should return undefined during their hydration render. That's easy when we hydrate all things together, because the cache is always empty initially, and the hydration process will finish before any data fetching happens.

However, with streaming SSR React can partially hydrate a part of the app. In the example above, the first useSWR hook was hydrated first, and the second is still pending due to slow network or a suspense boundary. After the hydration of the first useSWR hook, it fetches the data and updates the global cache on the client. And then, the second one hydrates. During its hydration render, it already reads the updated cache, instead of undefined. This causes a hydration mismatch.

The fix is to pass a server snapshot to useSyncExternalStore, so React will use that snapshot during hydration renders. And all we need to do is to make sure that we store the initial cache value somewhere before any write happens on the client, and return that initial cache as the server snapshot.

Reproduction

It's very tricky to reproduce and test this problem in our Jest setup. So I made this Sandbox to test: https://codesandbox.io/p/sandbox/swr-ssr-forked-tlgw5b?file=%2Fapp%2Fpage.js

Hydration mismatch in current swr@latest:

Works fine with this fix:

[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 e794b81:

Sandbox	Source
SWR-Basic	Configuration
SWR-States	Configuration
SWR-Infinite	Configuration
SWR-SSR	Configuration

[promer94]

The diagram and explanation are awesome !