socket.io vs swr for updating real-time content

Question

I am currently building a web app with next.js, which requires real-time updates across devices, for example, if someone joins a group this needs to be instantly shown for all existing members of the group.

At the moment, I'm initially fetching the data for the user when the page loads, and using socket.io to update content when necessary. However, I have just discovered the SWR framework, which automatically updates the content when there is a change in the body of the request.

My question is: am I better off sticking with my current approach, or using the SWR hook? At the moment, quite a lot of data is being fetched on page load, e.g. groups, settings, etc., but would it be more efficient if I used multiple SWR hooks to fetch the groups, settings, etc. separately?

Include

I'd have a look at Meteor. What you describe (pushing data to the clients when changes happen on the server) is exactly one of its key features. In some ways it does what you think SWR thought should do (and which, optimistically I first thought it did as well). – Corrientes

Answer 1

I don't think SWR does what you expect it to do. It helps you send a good ol' HTTP request, cache it and refresh it when you need (e.g. prop change, component mount, after a certain amount of time). The closest thing it does to socket might be "polling on interval".

You can set SWR to refresh the data every 5 seconds for example, but this is not actually a "real-time" connection. If your content requires real-time updates, I would say, stick with socket. If you want to load content from an HTTP server, cache and revalidate it from time to time, SWR is your tool.

Interpolation

Answer 2

You can check this feature that SWR brings to tackle real-time communication :

https://swr.vercel.app/docs/subscription#useswrsubscription

Version update: Please update to the latest version (≥ 2.1.0) to use this API.

Harlin

Answer 3

Because useSwr relies on HTTP its much more scalable than websockets, which tie your clients to specific servers for up to hours of time.

Yes, refreshing every 5 seconds with swr is not realtime, but if it serves your purpose using swr will be more dependable when traffic grows.

Starryeyed