RSS 구성하기

이번에는 블로그에서 RSS를 구성하는 방법을 소개하려고 합니다.
소개에 앞서 RSS가 무엇인지부터 간단히 알고 가보죠.

#RSS란?

RSS는 XML 기반으로 웹 서비스의 콘텐츠를 사용자에게 전달하는 하나의 형태입니다. Feedly와 같은 RSS 리더를 통해 RSS 피드에서 콘텐츠를 확인하고 사용할 수 있습니다.

Feedly에 적용된 Zenithium RSS

#이메일 구독과 다른 점

어떤 웹 서비스의 콘텐츠를 구독하는 또 다른 방법에는 이메일 구독이 있습니다. 하지만 이베일과는 명확한 차이점이 있는데요.

1. 이메일 구독은 콘텐츠 제공자가 사용자에게 콘텐츠를 보내는 것. RSS 구독은 사용자가 콘텐츠 제공자에게서 직접 가져오는 것.
2. 이메일 구독은 각 서비스에서 개별적으로 관리함. RSS 구독은 하나의 리더에서 일괄 관리할 수 있음.
3. RSS 구독은 이메일과 다르게 각 서비스에 개인 정보를 전달하지 않고 익명으로 구독할 수 있음.

이렇게 RSS 구독은 이메일 구독과는 다른 특징을 가지고 있습니다. 특히나 RSS 구독은 웹 서비스의 배포, 즉 업데이트를 즉각적으로 반영해 새로운 콘텐츠를 빠르게 확인할 수 있어 블로그처럼 비정기적인 콘텐츠가 자주 업데이트 되는 경우에 매우 적합하죠. 그럼 RSS를 블로그에 어떻게 적용할 수 있을까요?

#Next.js에서의 RSS 구성

Next.js에서는 Route Handler를 사용해 RSS를 구성합니다. 이 때, 직접 XML을 구성하는 방법도 있지만, 저는 간편하게 구성하기 위해 RSS 라이브러리를 활용했습니다.

npm install rss

먼저 rss 라이브러리를 설치한 후, Route Handler를 구성합니다.

export const GET = () => {
  const allPosts = getAllPosts();
 
  const feed = new RSS({
    title: "Zenithium",
    description: "To Zenith",
    generator: "RSS for Zenithium",
    site_url: baseUrl,
    feed_url: `${baseUrl}/feed.xml`,
    copyright: `Copyright ${new Date().getUTCFullYear().toString()}`,
    language: "ko-KR",
    pubDate: new Date().toUTCString(),
    ttl: 60,
  });
 
  allPosts.forEach(({ frontMatter: { title, description, date }, slug }) => {
    feed.item({
      title,
      description,
      date,
      url: `${baseUrl}/blog/${slug}`,
    });
  });
 
  return new Response(feed.xml({ indent: true }), {
    headers: {
      "Content-Type": "application/xml; ",
    },
  });
};

먼저 RSS 인스턴스를 생성합니다. 가장 메인이 되는 피드를 작성하게 되며 각 정보에 대한 내용은 RSS 라이브러리 문서를 참고하시면 쉽게 작성할 수 있습니다.

그리고 개별 포스트의 내용을 추가해 줍니다. 생성한 인스턴스에서 item 메서드를 사용해 포스트 콘텐츠 정보를 주입하면 됩니다.

최종적으로 해당 Route Handler의 결과를 생성하면 됩니다. 여기서 feed.xml() 메서드의 옵션으로 indent: true를 전달하게 되는데, 이는 RSS를 사람이 읽기 편한 형태로 들여쓰기, 줄바꿈 등의 포매팅을 해 주는 옵션입니다. 자세한 내용은 문서에서 확인할 수 있습니다.

Content Type에 charset을 utf-8로 설정하지 않으면 한글, 일본어, 중국어 등 이 정상적으로 출력되지 않을 수 있습니다.

#마무리

RSS를 라이브러리로 간단하게 구성하는 방법을 알아보았습니다. 제 RSS는 블로그의 최하단 Footer에 있는 RSS 버튼을 클릭하면 확인할 수 있어요.

RSS 아이콘

다음 포스트에서는 GitHub의 Discussion을 활용해 댓글을 작성할 수 있는 Giscus 라이브러리 적용 방법을 소개할 예정이니 많은 관심 부탁드려요!