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...