Video yükleniyor...
Video Yüklenemedi
In the latest `swr@beta`, you can seamlessly move data fetching between client-side and server-side, or both, in an RSC framework like Next.js: 🔸Client only: useSWR(key, fetcher) 🔹Mixed: useSWR(key, fetcher) + RSC-provided data 🔸Server only: useSWR(key) + RSC-provided data
267,424 görüntüleme • 2 yıl önce •via X (Twitter)
10 Yorum

Here’s all you have to do, no rewrites needed for individual Client Components. The provider can be scoped, nested and incrementally adopted:

Throttled network, fully client-side vs fetch initiated in RSC:

With JavaScript disabled, fully client-side vs fetch initiated in RSC:

Other benefits of initiating data in RSC: Hoisted, can starts before other awaits. Shared by all children. No hydration waterfalls. Single roundtrip. Closer to data center. No need to pass tokens/session to the client. Supports Suspense... Repo of demo:

Huge! Do requests get cached across invocations?

I've been using SWR like this for awhile, what is the difference? Is it solely in supporting a Promise in the fallback configuration?

In the written code yes it’s just fallback with promises supported. But once used, the behavior is very different. Like the components that consume the promises will be suspended, which enables streaming SSR and partial hydration. And since there’s no await, the shell (layout) is still static and it works perfectly with partial pre-rendering (PPR). For users it’s like seamlessly getting all the good parts of RSC.

In the new version, is it possible to populate the cache for a key of a *not yet mounted* hook? That would be great.

cc @AdamRackis

Does this work with with authenticated requests? Meaning it can read request stuffs (headers, cookies) during SSR? This looks like useSuspenseQuery from react-query (that suffers from this problem in next.js) @TkDodo @jullieri
