strategies for dynamic data server rendering and re-fetching

[thescientist13]

Overview

Some of the content for Tuesday's Tunes is dynamic and requires data coming from an an external source

• Youtube Playlist #17
• Spotify Playlist #18
• Newsfeed (Facebook Pages) #19 (Facebook)

For the playlists at least, for now it is easy enough to use an <iframe> and while that will always ensure content is fresh, it does so at the cost of a container we can't styles, and a whole other website loaded onto the page.

Alternatives

It would be nice instead if we could pull this playlist metadata at build time and create our carousel and player with our own styles and components.

export class YouTubePlaylist extends HTMLElement {
  onConnectedCallback() {
    if(!this.innerHTML) {
      const videos = await fetch('api.youtube.com/?....');

      this.innerHTML = `
        <h1>Past Episodes</h1>
        ${
          videos.map((video) => {
            const { title, url } = video;
            return `
              <h2>${title}</h2>
              <video src="${url}"></video>
            `;
          }).join('');
        }
      `
    }
  }
}

customElements.define('tt-youtube-playlist', YouTubePlaylist)

While probably not an issue if we can get access to an API, what about when content changes over the course of time though? If we go with build time data fetching, our data will only ever be as new as our last build.

Requirements

An implementation for any of the above would likely need a couple prerequisites:

1. An API to pull meta data from at build time
2. A way to listen for changes in content so we can rebuild our page (or somehow reconcile stale data at runtime)
3. A way to paginate back in the data (if we need) in the client

Implementation

It might be nice to explore a way to fetch HTML fragments at runtime since at that point, we just need to stamp out instances of what could be a shared <tt-card> component. We enable these playlists to manage their own HTML and explore a server less function endpoint that can return HTML from pagination data requests.

Maybe a cookie to track if they've already fetched for that day?

Or we just rely on web hooks to rebuild the site and set a limit to display, with the rest being fetched on demand on the client side.