블로그에 RSS 기능 추가하기

date

Jul 19, 2024

thumbnail

slug

blog-rss-feature-update

author

status

Public

tags

SEO

Next.js

Vercel

summary

동적, 정적 방식으로 블로그 콘텐츠에 대한 RSS 피드를 제공해보자

type

Post

category

Web

개요

RSS (Rich Site Summary, Really Simple Syndication)

• 뉴스나 블로그 사이트에서 주로 사용하는 콘텐츠 표현 방식

• 사이트의 콘텐츠를 구독하여 구독자들에게 업데이트한 콘텐츠를 제공할 수 있음

• 해당 사이트를 방문하지 않고도 새로 업데이트한 콘텐츠를 받아볼 수 있음

• 파일 확장자는 주로 .rss, .xml 이며 콘텐츠 타입은 application/rss+xml

• 이보다 고도화된 포맷인 Atom 또는 XML 대신 JSON을 사용하는 JSON Feed 등의 Contents Syndication 등이 존재

콘텐츠 신디케이터 라이브러리

npm: rss

RSS feed generator. Add RSS feeds to any project. Supports enclosures and GeoRSS.. Latest version: 1.2.2, last published: 8 years ago. Start using rss in your project by running `npm i rss`. There are 237 other projects in the npm registry using rss.

https://www.npmjs.com/package/rss

• 전통의 웹 콘텐츠 신디케이터 RSS를 생성해주는 라이브러리

npm: feed

Feed is a RSS, Atom and JSON feed generator for Node.js, making content syndication simple and intuitive!. Latest version: 4.2.2, last published: 3 years ago. Start using feed in your project by running `npm i feed`. There are 174 other projects in the npm registry using feed.

https://www.npmjs.com/package/feed

• RSS 2.0, JSON Feed 1.0, Atom 1.0 피드를 생성해주는 라이브러리

• XML을 사용하는 RSS 대신 JSON Feed를 사용하면 파싱이 쉽고 가벼움

RSS 라이브러리 사용하기

RSS 만들고 내보내는 과정

1. 피드(feed)를 생성

2. 피드의 내용을 설정

3. 피드에 아이템(item) 넣기

4. 피드를 파일로 만들어 내보내기

피드 생성 및 설정

const myFeed = new RSS(feedOptions);

const myFeed = new RSS({
	title: //...
	description: //...
	feed_url: //...
	site_url: //...
	image_url: //...
	language: //...
	// 등등 여러 옵션들이 존재
});

• 새 피드를 생성한다.

• 피드의 내용(feedOptions)들을 설정한다.
• 커스텀 요소들을 넣을 수도 있다.

피드에 아이템 넣기

feed.item(itemOptions);

feed.item({
	title: //...
	description: //...
	url: //...
	author: //...
	date: //...
	// 등등 여러 옵션들이 존재
});

• 피드에 아이템을 채워넣는다.

• 아이템 내용(itemOptions)들을 설정한다.
• 커스텀 요소들을 넣을 수도 있다.

피드 포장

const xml = feed.xml({ indent: true });

내보내기

정적으로 제공하기

✅ 서버 리소스를 사용하지 않으며, 캐싱 및 빠른 응답이 가능함

💦 최신 피드를 제공하려면 빌드가 필요함

동적으로 제공하기

✅ 항상 최신 피드를 제공할 수 있음

💦 매 요청마다 서버 리소스 사용하는 등 고려할 점 많음

동적으로 API를 통해 제공하기

import { getPosts } from "@/src/libs/apis"
import { NextApiHandler } from "next"
import RSS from "rss"

const rss: NextApiHandler = async (req, res) => {
	// 피드 생성하고 설정하기
  const feed = new RSS({
    title: "dongho-log",
    description: "신동호 기술 블로그"
    site_url: "https://www.dongho.xyz",
    feed_url: "https://www.dongho.xyz/api/rss.xml",
  })

	// 모든 글 긁어와서 공개된 글만 필터링
  const allPosts = await getPosts()
  const publicPosts = allPosts.filter(
      (post) => post.status && post.status.includes("Public")
  )
	
	// 피드에 아이템 넣기
  publicPosts.map((post) => {
    feed.item({
      title: post.title,
      url: `https://www.dongho.xyz/${post.slug}`,
      date: post.createdTime,
      description: post.summary ?? "",
    })
  })

  // 헤더 캐시 설정
  res.setHeader("Content-Type", "text/xml")
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=1200, statle-while-revalidate=600"
  )
  
  // RSS 피드를 XML로 포맷팅하여 응답
  res.write(feed.xml({ indent: true }))
  res.end()
}

export default rss

배포 페이지에서 문제 발생

Maximum Duration 변경하기

Configuring Maximum Duration for Vercel Functions

Learn how to set the maximum duration of a Vercel Function.

https://vercel.com/docs/functions/configuring-functions/duration#maximum-duration-for-different-runtimes

// vercel.json
{
  "functions": {
    "src/pages/api/rss.xml.ts": {
      "maxDuration": 30
    }
  }
}

• 넉넉하게 30초로 해줬다.

콜드 스타트(Cold Start) 문제였을까?

---

서버리스 아키텍처(Serverless Architecture)에서 콜드 스타트(Cold Start)는 첫 실행 및 초기화에 한해 응답 지연이 발생하는 문제다. 아마도 Notion API를 통해 내 Notion 페이지의 하위 페이지들을 모두 읽어오는 시간 때문에 오래 걸리는 것일 수도 있겠지만 콜드 스타트로 인한 응답 지연 이슈도 더해지지 않았을까?

정적 생성도 제공하기

import { TPosts, TPost } from "@/src/types"
import RSS from "rss"

export async function generateRssFeed(allPosts: TPosts) {
  const feed = new RSS({
    title: "dongho-log",
    site_url: "https://www.dongho.xyz",
    feed_url: "https://www.dongho.xyz/rss.xml",
    description: "신동호 기술 블로그",
  })

  const publicPosts = allPosts.filter(
    (post: TPost) => post.status && post.status.includes("Public")
  )

  publicPosts.map((post, _i) => {
    feed.item({
      title: post.title,
      url: `https://www.dongho.xyz/${post.slug}`,
      date: post.createdTime,
      description: post.summary ?? "",
    })
  })

  const rss = feed.xml({ indent: true })
  return rss
}

export async function getStaticProps() {
	const posts = await getPosts()
	
	//... 생략
	
	const rssFilePath = path.join(process.cwd(), "public/rss.xml")
	
	try {
	  await fs.access(rssFilePath)
	} catch (error) {
	  const rss = await generateRssFeed(posts)
	  await fs.writeFile(rssFilePath, rss)
	}
	
	//... 생략
}

• rss.xml이 없는 경우에만 파일을 생성하도록 작성

import { getPosts, generateRssFeed } from "@/src/libs/apis"
import { NextApiHandler } from "next"

const rss: NextApiHandler = async (req, res) => {
  const allPosts = await getPosts()
  const rss = await generateRssFeed(allPosts)

  res.setHeader("Content-Type", "text/xml")
  res.setHeader(
    "Cache-Control",
    "public, s-maxage=1200, statle-while-revalidate=600"
  )
  res.write(rss)
  res.end()
}

export default rss

• generateRssFeed 함수를 재사용하도록 수정

참고 문서

서버리스 아키텍처(Serverless Architecture)와 콜드 스타트(Cold Start)

들어가기 전에 우선 서버리스는 문자 그대로 서버가 없다는 뜻은 전혀 아니다. 서버에 대해 고려를 할 필요가 없는 구조라고 이해하는 것이 좋다. 서버리스라는 단어는 실제 이 아키텍처를 함축한 단어로는 적합하지 않고, 오히려 상술에 가까운 말이라고 생각한다. 다만 용어가 가지는 파급력과 간결함 때문에 논문에도 자주 등장하며 이 아키텍처를 표현하는 단어로 곧잘 사용되는 것 같다. 서버리스 아키텍처의 개념 우선 서버리스 아키텍처라는 개념에 대한 설명을 가져왔다. redhat…

https://blog.frec.kr/cloud/serverless_and_cold_start/

Configuring Maximum Duration for Vercel Functions

Learn how to set the maximum duration of a Vercel Function.

https://vercel.com/docs/functions/configuring-functions/duration#maximum-duration-for-different-runtimes

[Next.js] RSS, Feed(피드) 설정방법

Next.js RSS 및 Feed 통합은 웹 사이트 콘텐츠를 전달하는 방식을 혁신적으로 바꾸는 테크놀로지 중 하나입니다. 이 기사에서는 웹 사이트를 최적화하는 데 Next.js RSS 피드를 사용하는 포괄적인 가이드를 소개하며 사용자 경험을 향상시키고 동적 콘텐츠 업데이트의 혜택을 제공합니다. RSS란? RSS는 Rich Site Summary 또는 Really Simple Syndication의 약자로, 웹사이트의 새로운 콘텐츠를 요약하여 제공하는 XML 기반의 콘텐츠 표현 방식입니다. RSS를 이용하면, 사용자가 관심 있는 웹사이트의 새로운 콘텐츠를 한눈에 확인할 수 있습니다. RSS는 다음과 같은 특징을 가지고 있습니다. 웹사이트의 새로운 콘텐츠를 요약하여 제공합니다. XML 기반으로 제작되어, 다..

https://pusha.tistory.com/entry/Nextjs-RSS-Feed피드-설정방법