Building real-time UIs with Remix
BeeRich uses Remix’s Express.js adapter and runs on a long-running server. As such, BeeRich can take advantage of polling, SSE, and the WebSocket API to implement real-time features.
Short polling is simple to set up. We can implement short polling in Remix by using Remix’s useRevalidator hook:
import { useEffect } from 'react';import { useRevalidator } from '@remix-run/react';
function Component() {
const { revalidate } = useRevalidator();
useEffect(() => {
const interval = setInterval(revalidate, 4000);
return () => {
clearInterval(interval);
};
}, [revalidate]);
}
The revalidate function of the useRevalidator hook triggers a loader revalidation. This allows us to refetch all loader data, similar to how Remix refetches all loader data after executing an action...
