Clarify the "real time" component of SWR

[user72356]

On the main SWR landing page, "realtime" is a claimed benefit of SWR [1]

Similarly, I see SWR being thrown about on a Vercel documentation page talking about realtime as a concept [2].

Yet I don't see any concrete examples of how SWR helps with real time apps. To me, real time means that there must be some kind of server-side component that communicates with clients to either send them new data, or trigger them to fetch the new data.

I don't see how different SWR is than any other fetching mechanism for this. Please somebody help me understand. I'm looking at Replicache for real time, but I want to keep the stack lean, so... Let me know if SWR has actual real time capabilities!

[1] https://swr.vercel.app/
[2] https://vercel.com/docs/concepts/solutions/realtime

[indifferentghost]

Kinda sad to see this unanswered after so long.

[pybern]

I know this is old but sharing some of my experiences.

When opening the Vercel dashboard and navigating to the Network tab under Developer Tools, you can see that there are constant fetches whenever you are on the page or focused. You can find those methods here https://swr.vercel.app/docs/revalidation#revalidate-on-interval

It is also stated in [2] https://vercel.com/docs/concepts/solutions/realtime where the realtime communication means that it allows events to be streamed directly to the app. And the example with Vercel dashboard states that it fetches realtime updates with on-demand.

A simple implementation could be something like this:

    const [events, setEvents] = useState<Event[]>(initialEvents)
    
    // Use SWR to fetch events with polling
    const { data, error } = useSWR('/api/events', fetcher, {refreshInterval : 1000})
    
    // Update events when SWR data changes
    useEffect(() => {
        if (data) {
            console.log(`SWR data received at ${new Date().toISOString()}:`, data)
            setEvents(data)
        }
    }, [data])

The client component receives a initial event by the parent server component then updates on client side every 1 second. Monitoring Network again, the app should constantly be fetching to see if there are updates. The fetch should only be running when you are on the tab itself. This behaviour seems to be consistent with the Vercel dashboard, just that Vercel is fetching many more events given its complexity.