Building a Real-time RSS Feed Display in React

Use rss-parser to fetch and parse RSS XML into JavaScript objects. 2. Implement polling with setInterval to check for updates every 30 seconds and deduplicate using GUIDs. 3. Optimize with a backend that fetches, parses, and serves RSS data as JSON to avoid CORS and client-side parsing. 4. Enhance UX by animating new items, showing a "X new posts" banner, and preventing scroll jumps. 5. Optionally upgrade to true real-time via WebSockets or webhooks if the feed source supports it. A reliable real-time RSS display in React combines parsing, polling, deduplication, smooth UI updates, and optional backend support for production use.

So you want to show fresh content from an RSS feed in your React app — and you want it updated in real time. It's not as straightforward as just fetching a JSON API, since RSS is XML-based and doesn't natively support live updates. But with a few smart tools and patterns, you can build a slick real-time RSS display in React. Here’s how.

1. Fetch and Parse the RSS Feed

RSS feeds are XML, not JSON, so you can’t just fetch().json() them. You need to parse the XML into a usable JavaScript object.

You have two main options:

• Use a parser like rss-parser (recommended)
• Fetch and parse XML manually with DOMParser

The easiest way is using the rss-parser library:

npm install rss-parser

Then in your React component:

import Parser from 'rss-parser';

const parser = new Parser();

function App() {
  const [posts, setPosts] = useState([]);

  const fetchRssFeed = async () => {
    try {
      const feed = await parser.parseURL('https://example.com/feed.xml');
      setPosts(feed.items);
    } catch (err) {
      console.error('Error fetching RSS feed:', err);
    }
  };

  useEffect(() => {
    fetchRssFeed();
  }, []);
}

This gives you a clean array of posts with titles, links, descriptions, publication dates, etc.

2. Poll for Updates (Simple "Real-Time")

True real-time would require WebSockets or server-sent events — but most RSS sources don’t offer that. So the practical approach is polling: check for new items every X seconds.

useEffect(() => {
  fetchRssFeed(); // Initial load

  const interval = setInterval(() => {
    fetchRssFeed();
  }, 30000); // Every 30 seconds

  return () => clearInterval(interval); // Cleanup on unmount
}, []);

To avoid re-rendering with duplicate items, you can compare GUIDs or publication dates:

setPosts(prevPosts => {
  const newPosts = feed.items.filter(item =>
    !prevPosts.some(prev => prev.guid === item.guid)
  );
  return [...newPosts, ...prevPosts]; // Add new ones to the top
});

? Tip: Don’t mutate the feed — keep it as a list sorted by date, and deduplicate using guid or link.

3. Optimize with a Backend (Better for Production)

Calling rss-parser directly in the frontend works for demos, but has downsides:

• CORS issues with some feeds
• Client bears parsing cost
• Polling from client can be inconsistent

Better: build a lightweight backend (Node.js Express, Firebase Function, etc.) that:

• Fetches and parses the RSS feed
• Caches the result
• Serves it as JSON to your React app

Example endpoint: GET /api/rss → returns { items: [...] }

Now your React app just does:

const feed = await fetch('/api/rss').then(r => r.json());

No XML parsing on the client, no CORS, and you can add rate limiting or caching headers.

4. Make It Feel Real-Time with Smooth Updates

Instead of a full refresh, enhance UX by:

• Animating in new items
• Avoiding scroll jump
• Showing a "X new posts" banner

Example:

const [newCount, setNewCount] = useState(0);

// Inside fetchRssFeed, after getting new items:
const freshItems = newPosts.filter(item => 
  !prevPosts.some(p => p.guid === item.guid)
);
setNewCount(freshItems.length);

Then show:

{newCount > 0 && (
  <div className="update-banner" onClick={() => setNewCount(0)}}>
    {newCount} new post(s) — click to refresh
  </div>
)}

Only re-render the list when the user clicks, or auto-refresh quietly if preferred.

Bonus: Upgrade to True Real-Time (Advanced)

If you control the feed source or use a service like Feedbin or Superfeedr, you can get push updates via Webhooks or WebSockets.

Typical flow:

• Your server subscribes to feed changes
• On update, it pushes new items to clients via WebSocket or Firebase
• React app listens and inserts new items

But for most use cases, polling every 30–60 seconds is perfectly fine.

Basically, real-time RSS in React comes down to:
parse XML → poll regularly → deduplicate → update UI smoothly.
Add a backend proxy to avoid CORS and improve performance.

It’s not flashy, but it works reliably.

The above is the detailed content of Building a Real-time RSS Feed Display in React. For more information, please follow other related articles on the PHP Chinese website!