Chris Padilla/Blog / Tech

Adding RSS Feed to Next.js with SSR

I'm a big blog nerd. Growing up, I subscribed to my favorite webcomics. I mourned the death of Google Reader. I love the spirit of blogging today as an alternative, slow paced social media.

Naturally, I HAD to get one going on this site!

There are several great resources for getting a feed going with SSG and Next.js. This one was a favorite. Here, I'm going to add my experience setting it up with a SSR Next site.

The Sitch

Here's what static site solutions suggested:

  • Write your rssFeedGenerator function
  • Add the function to a static page's getStaticProps method
  • On build, the site will generate the feed and save it in a static XML file.

The issue for my use case is that my site is leveraging Server Side Rendering. I'm doing this so I can upload a post that is scheduled to release at a later date. With a static site, I would be stuck with old data and the post wouldn't release. With SSR, there is a simple date comparison that filters published and scheduled posts.

So, since we have a Server Side Rendering solution for pages, we need a SSR solution for the RSS feed.

Rendering RSS Feed from the Server

I'll briefly start with the code to generate the XML file for the feed. I'm creating a generateRSSFeed method that largely looks similar to the one described in this guide.

That gets passed to my handler getRSSFeed.

export async function getRSSFeed() {
  const posts = await getAllPostsWithConvertedContent(
      filter: filterBlogPosts,
      limit: 10,

  const feed = generateRSSFeed(posts);
  return feed;


And here's the tweak: I'm using the method in the api routes folder instead of getStaticProps.

import { getRSSFeed } from '../../lib/api';

export default async function handler(req, res) {
  const xml = await getRSSFeed();
  res.setHeader('Content-Type', 'application/rss+xml');


Instead of generating a static file and saving it to our assets folder, here we're serving it up from the API directly.

And that's it! Once the time passes on a scheduled post, the next request to the feed will include that latest post!