Consuming and Displaying an RSS Feed in a React Application

To add RSS feed to React applications, you need to resolve CORS limitations and parse XML data through a server-side proxy. The specific steps are as follows: 1. Use CORS proxy (development stage) or create server functions (production environment) to obtain RSS feed; 2. Use DOMParser to convert XML into JavaScript objects; 3. Request this interface in the React component to obtain parsed JSON data; 4. Render the data to display the title, link, date and description, and safely process the HTML content; 5. It is recommended to add load status, error handling, entry restrictions and server-side cache to optimize the experience. The ultimate implementation integrates external content without a third-party API.

Adding an RSS feed to a React application can be a great way to pull in external content—like blog posts, news updates, or podcasts—without relying on a traditional API. While RSS isn't JSON, you can still consume and display it effectively with a few extra steps. Here's how to do it in a practical, real-world way.

Why RSS Feeds Aren't Directly Usable in React

RSS feeds are XML, not JSON. Browsers and JavaScript don't parse XML as easily as JSON, and modern fetch() doesn't handle XML natively. Plus, many RSS feeds are hosted on domains that may not allow direct cross-origin requests (CORS), so you can't just fetch() them from the frontend directly.

So, you need two things:

1. A way to convert XML to a usable JavaScript object.
2. A way to bypass CORS—either via a proxy or a serverless function.

Step 1: Fetch and Parse the RSS Feed

Since you can't reliably fetch RSS from the client due to CORS, one common solution is to use a proxy service or a serverless function .

Option A: Use a CORS Proxy (Quick & Simple)

For development or low-traffic apps, use a public CORS proxy like //m.sbmmt.com/link/eb852fa9d9e60316fa715602baf5bc05 :

 const fetchRssFeed = async () => {
  const proxyUrl = '//m.sbmmt.com/link/eb852fa9d9e60316fa715602baf5bc05/get';
  const rssUrl = 'https://example.com/feed.xml';

  try {
    const response = await fetch(`${proxyUrl}?url=${encodeURIComponent(rssUrl)}`);
    const data = await response.json();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(data.contents, 'text/xml');

    const items = Array.from(xmlDoc.querySelectorAll('item')).map(item => ({
      title: item.querySelector('title')?.textContent || '',
      link: item.querySelector('link')?.textContent || '',
      pubDate: item.querySelector('pubDate')?.textContent || '',
      description: item.querySelector('description')?.textContent || '',
    }));

    return items;
  } catch (error) {
    console.error('Error fetching RSS feed:', error);
    return [];
  }
};

⚠️ Note: Public proxies can be slow or unreliable. Don't use them in production.

Option B: Use a Serverless Function (Recommended)

Create a simple backend endpoint (eg, using Vercel, Netlify, or Express) that fetches the RSS feed server-side:

Example with Vercel API function ( /api/rss.js ):

 export default async function handler(req, res) {
  const rssUrl = 'https://example.com/feed.xml';

  try {
    const response = await fetch(rssUrl);
    const xmlText = await response.text();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, 'text/xml');

    const items = Array.from(xmlDoc.querySelectorAll('item')).map(item => ({
      title: item.querySelector('title')?.textContent || '',
      link: item.querySelector('link')?.textContent || '',
      pubDate: item.querySelector('pubDate')?.textContent || '',
      description: item.querySelector('description')?.textContent || '',
    }));

    res.status(200).json(items);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch RSS feed' });
  }
}

Then in your React component:

 const [posts, setPosts] = useState([]);

useEffect(() => {
  const loadFeed = async () => {
    const res = await fetch('/api/rss');
    const data = await res.json();
    setPosts(data);
  };
  loadFeed();
}, []);

Step 2: Display the Feed in Your Component

Once you have the parsed data, rendering it is straightforward:

 function RssFeed() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadFeed = async () => {
      try {
        const res = await fetch('/api/rss');
        const data = await res.json();
        setPosts(data);
      } catch (error) {
        console.error('Failed to load feed');
      } finally {
        setLoading(false);
      }
    };
    loadFeed();
  }, []);

  if (loading) return <p>Loading feed...</p>;

  Return (
    <div className="rss-feed">
      <h2>Latest Posts</h2>
      <ul>
        {posts.map((item, index) => (
          <li key={index}>
            <h3>
              <a href={item.link} target="_blank" rel="noopener noreferrer">
                {item.title}
              </a>
            </h3>
            <p className="date">{new Date(item.pubDate).toLocaleDateString()}</p>
            <div
              className="description"
              dangerouslySetInnerHTML={{ __html: item.description }}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

Bonus Tips

• Sanitize HTML in descriptions : RSS descriptions often contain HTML. Using dangerouslySetInnerHTML works, but consider using a sanitizer like DOMPurify if security is a concern.
• Cache the feed : RSS doesn't change every second. Cache the result on the server side (eg, with Redis or in-memory cache) to reduce load and avoid rate limits.
• Add error fallbacks : Show a friendly message if the feed fails to load.
• Limit items : Don't render 100 posts. Use .slice(0, 5) to show just the latest few.

Summary

Consuming an RSS feed in React involves:

1. Getting around CORS (proxy or serverless function).
2. Parsing XML into JavaScript objects.
3. Displaying the data in your component.

It's not as simple as calling a JSON API, but with a small backend helper, it's totally doable and useful for pulling in external content without third-party dependencies.

Basically, just move the fetch to the server, parse the XML, and treat the result like any other data source.

The above is the detailed content of Consuming and Displaying an RSS Feed in a React Application. For more information, please follow other related articles on the PHP Chinese website!