RSS Feed en Astro: Tutorial con TypeScript

Quizás para ti sea un concepto relativamente nuevo, así que definámoslo en unas pocas palabras. RSS es un estándar o formato que se utiliza para distribuir contenido actualizado. Es por ello que solía ser muy popular para blogs y sitios de noticias.

Este formato tuvo su auge a principios de los 2000. Actualmente, aunque ha perdido la relevancia masiva que solía tener, muchos sitios web, servicios y blogs siguen ofreciendo canales RSS. Esto nos permite a los consumidores del contenido poder gestionar lo que leemos y estar al día sin tener que entrar constantemente a las redes sociales, evitando estar a merced del algoritmo.

Algunas plataformas que a lo mejor conoces o utilizas que proveen RSS son:

Medium 📝

Puedes leer en su web oficial cómo los perfiles de los escritores, las publicaciones (publications) y los temas (topics) tienen un feed RSS. Por ejemplo, el feed RSS para un escritor se consigue con la ruta: medium.com/feed/@username

Ejemplo, mi feed RSS en Medium es: https://medium.com/feed/@anb98

Al abrirlo, lo que verás es formato XML. Lo sé, no es nuestro querido formato JSON, pero no te preocupes, cualquier lector de RSS lo interpretará sin problema.

Dato curioso: Medium, vía RSS, te permite leer los artículos completos, a excepción de los que tienen un Paywall activo.

YouTube 📺

En el caso de YouTube, la plataforma nos provee feeds RSS tanto por canal como por lista de reproducción (playlist).

Para un canal, el formato sería: https://www.youtube.com/feeds/videos.xml?channel_id=ID_DEL_CANAL Ejemplo: https://www.youtube.com/feeds/videos.xml?channel_id=UCin0m13qWv3-051xlWlHamA

Tip para conseguir el ID del canal: Debes ir al canal, dar clic en la descripción y seleccionar “Compartir canal”; allí te saldrá la opción “Copiar ID del canal”. Como esto puede ser un proceso un poco tosco, te recomiendo utilizar herramientas de terceros como YouTube RSS de David Breder. Solo pegas la URL del canal y te devolverá el feed RSS directamente.

Para una playlist, el formato sería: https://www.youtube.com/feeds/videos.xml?playlist_id=ID_DE_LA_PLAYLIST

Nota sobre el ID_DE_LA_PLAYLIST: El ID de la playlist es la cadena de caracteres que aparece en la URL del navegador justo después del parámetro &list=.

Ejemplo: https://www.youtube.com/feeds/videos.xml?playlist_id=PLarzDke3cEZ-9ZTZFXzImqhNr0l9PnI34

Según he podido experimentar, de forma aleatoria los feeds RSS de YouTube suelen devolver un error 404, pero luego se solventa en cuestión de horas. Al menos eso es lo que también indican en discusiones de Reddit.

Dev.to 👩‍💻

Si eres de consumir artículos en Dev.to, las opciones de sindicación que tenemos son:

• Main feed: dev.to/feed/
• Author feed: dev.to/feed/[username]
• Tag feed: dev.to/feed/tag/[tag]

Reddit 👽

Casi todo dentro de Reddit puede ser convertido en un feed RSS. Solo tienes que agregar la extensión .rss al final de la URL y listo. Ejemplos:

• Subreddit: https://www.reddit.com/r/selfhosted/.rss
• Comentarios de un post: https://www.reddit.com/r/selfhosted/comments/1rflyx9/which_services_should_i_self_host_to_prepare_for/.rss
• Hilo de comentarios específico: https://www.reddit.com/r/rss/comments/1r6f47j/comment/o5rta6q/.rss

Estos son solo algunos ejemplos; si buscas algo más específico, te invito a que hagas la prueba agregando la extensión.

Implementación en Astro 🚀

El objetivo de implementar RSS en astro es mantener al día a tus lectores con las novedades de tu sitio web. En mi caso, al tratarse de un blog, queda como anillo al dedo.

La documentación oficial es muy buena y va directo al grano; te invito a visitarla para más detalles. Lo primero que necesitarás será agregar la dependencia: @astrojs/rss. Asegúrate de haber establecido la propiedad site dentro de tu archivo de configuración astro.config.mjs (o .ts).

Tu archivo de configuración lucirá parecido al siguiente:

import { defineConfig } from "astro/config";

export default defineConfig({
  server: {
    host: true,
  },
  site: "https://abdiel.dev",
});

Luego, debes crear un archivo en el directorio src/pages/ con la extensión .xml.ts o .xml.js. Puedes asignarle el nombre que prefieras, pero debes recordar que con ese nombre se generará la ruta URL. El estándar de la industria suele ser feed.xml o rss.xml. En mi caso, el archivo se llama src/pages/rss.xml.ts y se puede acceder desde: https://abdiel.dev/rss.xml

La documentación te muestra cómo hacerlo con JavaScript, pero si estás trabajando con TypeScript, como es mi caso, la implementación base sería la siguiente utilizando un API Route:

import rss from "@astrojs/rss";
import type { APIRoute } from "astro";

export const GET: APIRoute = async (context) => {
  return rss({
    title: "Abdiel Martinez’s Blog",
    description: "La descripción de tu blog va aquí",
    site: context.site ?? "https://abdiel.dev",
    items: [],
  });
};

Estos serán los datos generales de tu feed. Las entradas individuales son las que irán en el arreglo de la propiedad items. La forma en que las generes dependerá completamente de ti; la documentación de Astro nos explica cómo mapearlas dinámicamente utilizando una Content Collection.

Para no ser redundante con la documentación oficial, te daré un tip avanzado que no es tan evidente a simple vista: cada ítem puede tener archivos multimedia adjuntos. Para ello, debes agregar la propiedad enclosure con la siguiente estructura de información:

{
  url: "https://ejemplo.com/archivo.ext",
  type: "mime/type",
  length: 0, // Tamaño en bytes
}

Te muestro un ejemplo práctico implementándolo en un ítem:

import rss from "@astrojs/rss";
import type { APIRoute } from "astro";
import { data } from "./example.ts";

export const GET: APIRoute = async (context) => {
  return rss({
    title: "Abdiel Martinez’s Blog",
    description: "Mi blog técnico personal",
    site: context.site ?? "https://abdiel.dev",
    items: [
      {
        title: data.title,
        description: data.description,
        pubDate: new Date(data.timestamp),
        categories: data.tags,
        enclosure: {
          url: "https://example.com/image.jpeg",
          type: "image/jpeg",
          length: 1024,
        },
        link: `/blog/slug`,
      },
    ],
  });
};

Consejo de rendimiento: Si tienes cientos de entradas en tu página web o blog, te recomiendo limitar el arreglo de items a un número máximo (por ejemplo, los últimos 20 posts). Esto evita saturar el ancho de banda y mejora los tiempos de carga en los lectores de feeds RSS.

Otro tip valioso, que en este caso sí se encuentra en la documentación, es habilitar el RSS Autodiscovery. Esto permite a los navegadores y lectores de RSS encontrar automáticamente el feed asociado a tu sitio web sin que el usuario tenga que buscar la URL exacta.

Para habilitarlo, es tan fácil como agregar la siguiente etiqueta <link> dentro de la etiqueta <head> de tu layout base:

<link
  rel="alternate"
  type="application/rss+xml"
  title="Abdiel Martinez’s Blog"
  href={new URL("rss.xml", Astro.site)}
/>

En mi caso, hace un par de semanas decidí agregar RSS a mi blog. Para añadirlo a tu lector de feeds, puedes dar clic en el símbolo universal de RSS o copiar directamente la URL: https://abdiel.dev/rss.xml

Lectores de feeds RSS recomendados 📱

• n8n: Si te gusta realizar automatizaciones en n8n como a mí (Ver artículo sobre n8n), puedes ocupar el trigger RSS Feed Trigger o el nodo RSS Read para procesar tus feeds de forma programática.
• Telegram: Encontrarás diversos bots que leen RSS. Mi recomendación personal es el Feed Reader Bot. Lo vengo utilizando desde hace un par de años y funciona de maravilla; no solo lee RSS, sino que también puedes agregar cuentas de TikTok, Twitter y páginas de Facebook.
• Opera: El navegador Opera integra un lector de RSS nativo para su sección de noticias. Por ejemplo, si abres el link del RSS de mi blog en Opera, la interfaz se encargará de parsear el XML automáticamente para una lectura cómoda.

Conclusión 🏁

Aquí concluye nuestro pequeño viaje por el mundo del RSS y su moderna implementación web. Cuéntame, ¿ya conocías a fondo este formato? ¿Tienes canales RSS favoritos sin los que no puedes vivir? ¡Hazmelo saber en la caja de comentarios!