Myth-busting: Jamstack can't handle dynamic content

The Jamstack is a modern approach to building websites that focuses on pre-rendering and statically generating sites for improved performance, security, and scalability. It involves using JavaScript, APIs, and Markup (JAM) to create dynamic content without relying on traditional server-side rendering. This article explores the concept of Jamstack and demonstrates how it can be used to build a realtime synced streaming application called a live watch party app. The app allows users to watch a video synchronously with friends while chatting alongside, similar to Netflix's watch party feature. The tech stack for this watch party app includes Nuxt.js, Strapi, Ably, and Netlify. Nuxt.js is a web framework based on Vue.js that enables the creation of server-side rendered or static websites. Strapi is an open-source headless CMS used to manage video content in this project. Ably is a realtime messaging infrastructure service that provides low-latency messaging, high reliability, and global scalability. Netlify is a cloud hosting company known for popularizing the Jamstack approach by offering hosting and serverless backend services for web applications and static sites. The watch party app's architecture involves serving statically generated websites directly from a CDN (Content Delivery Network) without needing an origin server. Although the initial site that's loaded from the CDN is static, containing pre-rendered assets and data, dynamic content can be retrieved via API calls to external servers or APIs. This results in improved performance and better user and developer experience. The watch party app uses Ably's Pub/Sub platform for realtime messaging, which allows different components of the app to communicate with each other seamlessly. The app also utilizes VueX store, a central store for most of the data in the static site, making it easier to manage and update state variables across various components. In conclusion, Jamstack can effectively handle dynamic content and is a great concept when applied correctly. By leveraging modern technologies like Nuxt.js, Strapi, Ably, and Netlify, developers can create powerful realtime applications with enhanced performance, security, and scalability.