#12 No-code 之旅 — 在 Next.js 专案中显示 RSS 的资料 ft. RSS Parser

嗨嗨嗨！昨天使用 Notion SDK 显示我的 Notion page 里面的内容，可以在这里看看喔。那今天新增了一个新的页面，使用 RSS 显示iT邦帮忙系列文的文章！点我看成果～

Setup

我们今天用的 library 叫做 rss-parser (Github)，来安装喔：

npm install rss-parser
# or
yarn add rss-parser

这 library 可以用在 Node.js 环境同时也能在 Web 使用，装完之後我们可以开始用了～

import Parser from "rss-parser";

// 初始化 Parser
const parser = new Parser();

它提供两种方法，一个是 parser.parseURL 去抓取某 RSS URL 的内容，另一个是 parser.parseString 去 parse XML 字串。我们今天用的是 parser.parseURL。

取得系列文资料

我们可以在浏览器上输入 RSS 的连结 (例如 https://ithelp.ithome.com.tw/rss/series/4914)，应该会看到很多黑白文字（？
这是 XML 格式然後里面会包含系列文的资讯以及系列文里面的所有文章内容：

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>制作你的无程序码(No-code)个人网页 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 铁人赛</title>
    <link>https://ithelp.ithome.com.tw/users/20141378/ironman</link>
    <description><![CDATA[在这 30 天想要制作最近很红的 no-code (无程序码) 网页～
...]]></description>
    <atom:link href="https://ithelp.ithome.com.tw/users/20141378/ironman" rel="self"></atom:link>
    <image>
      <url>https://ithelp.ithome.com.tw/images/ironman/13th/fb.jpg</url>
      <title>制作你的无程序码(No-code)个人网页 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 铁人赛</title>
      <link>https://ithelp.ithome.com.tw/users/20141378/ironman</link>
    </image>
    <language>zh-TW</language>
    <lastBuildDate>Mon, 27 Sep 2021 20:49:12 +0800</lastBuildDate>
    <item>...</item>
    <item>...</item>
    ...
  </channel>
</rss>

<item>...</item> 就是系列文里的每一篇文章，

<item>
  <title>#02 No-code 之旅 - Next.js 简介</title>
  <link>https://ithelp.ithome.com.tw/articles/10266342?sc=rss.iron</link>
  <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10266342?sc=rss.iron</guid>
  <description><![CDATA[<p>大家星期五快乐！TGIF～ 今天想跟大家分享 Next.js 这个 React 框架 (官网写 &quot;The React Framework for Production&quot;)。讲...]]></description>
  <content:encoded><![CDATA[<p>大家星期五快乐！TGIF～ 今天想跟大家分享 Next.js 这个 React 框架 (官网写 &quot;The React Framework for Production&quot;)。讲到...]]>
  </content:encoded>
  <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Jade</dc:creator>
  <pubDate>2021-09-17 22:30:01</pubDate>
</item>

里面包含 title，link，description，content 等资讯。可是这些资料是用 XML 格式呈现出来的，所以我们需要 parser 来把这些资讯转成 JavaScript object (物件) 格式！让我们程序好拿我们所需的资料～

用 Data Fetching 方式抓取资料

豪！可以开始读资料了～ 因为 RSS 会定期更新资料，所以我想我可以用 getStaticProps 再搭配 revalidate 去 parse 我们系列文的内容。

export async function getStaticProps() {
  const parser = new Parser();
  const data = await parser.parseURL(
    // 我的系列文的 RSS 连结
    "https://ithelp.ithome.com.tw/rss/series/4914"
  );

  return {
    props: { data },
    revalidate: 30 * 60, // 至少 30 分钟後去产生新页面
  };
}

data 为 JavaScript object 格式：

{
  description: "在这 30 天想要制作最近很红的 no-code (无程序码) 网页～\r\n\r\n身为喜欢写程序的工程师，这次想挑战的并不是使用 no-code 平台实作一个网页出来，而是自己手刻制...",
  feedUrl: "https://ithelp.ithome.com.tw/users/20141378/ironman",
  image: {
    link: 'https://ithelp.ithome.com.tw/users/20141378/ironman',
    url: 'https://ithelp.ithome.com.tw/images/ironman/13th/fb.jpg',
    title: '制作你的无程序码(No-code)个人网页 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 铁人赛',
  },
  items: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}],
  language: "zh-TW",
  lastBuildDate: "Mon, 27 Sep 2021 21:51:15 +0800",
  link: "https://ithelp.ithome.com.tw/users/20141378/ironman",
  paginationLinks: {
    self: 'https://ithelp.ithome.com.tw/users/20141378/ironman',
  },
  title: "制作你的无程序码(No-code)个人网页 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 铁人赛",
}

拿到这些资料之後，我们可以显示在画面上了！所以我把这些资料显示在这个页面，里面的内容都不是写死的，而是从 RSS 拿到的资料喔～

小结

这几天串了几个不同的 API，取的各种资料，来显示在我们的网页上，而今天是读取 RSS 所提供的内容。虽然格式比较不一样，可是有了第三方 library 之後，我们也不需要自己去 parse 这些资讯。我们负责显示或是後处理就可以了！而且搭配 Next.js 的 ISR 真的很方便～
大家可以看看在这里，然後 RSS 连结在这里～

祝大家明天上班上课愉快！

Live Demo

晚安 <3

看更多

• RSS Parser
• #10 实作篇 — 使用 SWR 抓取和 Cache 资料
• #11 No-code 之旅 — 在 Next.js 专案中显示 Notion 的资料 ft. Notion SDK