SSR, SPAs and PWAs
summary
Concrete claim: server-side pre-rendering plus progressive enhancement yields much faster startup — the demo shows the initial meaningful paint and interactive times improve by about ~7s faster versus a plain SPA. Implementation details: an open‑source Breathe PWA built with Glimmer.js + Express renders on the server, attaches the client app, and adds service workers for offline. Specifics on progressive enhancement include real HTML forms and links that work without JavaScript and client fetch handlers that replace them when JS loads.
AI-written summary · about
chapters (22)
- 0:00Intro
- 0:52Web Development
- 3:02Mobile Devices
- 4:24Introduction
- 5:22What is a SPA
- 7:06Example of a PWA
- 8:13Characteristics of a PWA
- 8:57Page transitions
- 9:35Single page apps
- 11:10Fetch request
- 11:45Characteristics
- 13:20JavaScript
- 14:25Bundles
- 15:12Performance Comparison
- 17:10Overhead
- 17:38Progressive Web Apps
- 18:00Service Workers
- 20:06Improved Cache
- 21:12App Shell Model
- 29:50Single Page App
- 37:26Progressive Enhancement
- 48:50Summary
related talks
31mFrom Website to Progressive Web App
51mProgressive Web Apps
35mDesigning Great Progressive Web Apps
25mSupercharge the speed of your app with these PWAs' secrets! ⚡
28mSupercharge the Speed of your App with these PWAs Secrets!
55mPWA Fundamentals: websites with superpowers
45mScaling with PWA
40mSupercharge the speed of your app with these PWAs' secrets!